Javascript: использовать window.getSelection () одним щелчком мыши?

Вам нужно, чтобы ваш код javascript запускался событием onclick.

Итак, внутри вашего элемента p установите onclick на имя вашей js-функции:

<p onClick = "myFunction()">Whatever text here</p>

Где эта функция определяется как

var myFunction = function(){
    var s = window.getSelection();
    s = s.toString().trim();
    alert(s);
}

Дайте этому идентификатор, затем привяжите функцию щелчка:

<p>This text contains <span id = "this">--this;</span> and that-that.</p>

$( "#this" ).click(function() {
    var s = window.getSelection();
    s = s.toString().trim();
    alert(s);
});

https://api.jquery.com/click/

Для двойного щелчка используйте .dblclick

$( "#this" ).dblclick(function() {
    var s = window.getSelection();
    s = s.toString().trim();
    alert(s);
});

https://api.jquery.com/dblclick/

Когда вы щелкаете одним щелчком мыши, вы создаете диапазон выбора нулевой длины, поэтому toString() выбора, естественно, будет пустой строкой.

Если вы хотите знать все слово, которое существует там, где произошел единственный щелчок, вам придется немного глубже изучить то, что возвращает getSelection(): https://developer.mozilla.org/en-US/docs/Web/API/Selection

Объект Selection сообщит вам узел в дереве DOM, где существует этот выбор нулевой длины, и смещение в этом узле, где вы щелкнули. Вы можете легко получить весь текст, принадлежащий узлу, но это больше текста, чем вы хотите.

Что вам нужно сделать дальше, так это посмотреть на текст со смещением выделения и сканировать назад и вперед от этой точки, чтобы найти границы слов.

Извините, я не знаю менее сложного подхода, чем этот - насколько я знаю, нет ничего, что могло бы дать вам все слово при выборе одного щелчка автоматически.

Это моя реализация, демо здесь

document.addEventListener('mouseup', (e) => {
    const selection = window.getSelection();
    if (!selection.isCollapsed) {
        console.info("[skipping] Selection detected");
        return;
    }

    const word = getWordAt(selection.focusNode.textContent, selection.focusOffset);
    if (!word) {
        console.info("[skipping] Nothing selected");
        return;
    }

    const range = selection.getRangeAt(0);

    const elementOfSelectedWord = range.startContainer.splitText(range.startOffset - word.offset),
        elementAfterSelectedWord = elementOfSelectedWord.splitText(word.word.length);

    const decoratedElementOfSelectedWord = document.createElement('span');
    decoratedElementOfSelectedWord.appendChild(document.createTextNode(elementOfSelectedWord.textContent));
    elementOfSelectedWord.parentNode.insertBefore(decoratedElementOfSelectedWord, elementAfterSelectedWord);
    elementOfSelectedWord.parentNode.removeChild(elementOfSelectedWord);

    const clientRect = decoratedElementOfSelectedWord.getBoundingClientRect();

    if (!isMousePosCoveredInClientRect(e, clientRect)) {
        console.info("[skipping] Mouse pos is not covered in client rect");
        return;
    }

    drawRedRect(clientRect);

    console.info(`${word.word}`);
})


function getWordAt(content, offset) {
    const matchLeft = content.substr(0, offset).match(/(\w+)$/);
    const left = matchLeft ? matchLeft[1] : "";

    const matchRight = content.substr(offset).match(/^(\w+)/);
    const right = matchRight ? matchRight[1] : "";

    if (!left && !right) {
        return null;
    }

    return {word: left + right, offset: left.length};
}

function isMousePosCoveredInClientRect(event, clientRect) {
    return (
        event.clientY >= clientRect.y &&
        event.clientY <= clientRect.y + clientRect.height &&
        event.clientX >= clientRect.x &&
        event.clientX <= clientRect.x + clientRect.width
    );
}

function drawRedRect(clientRect) { // this is to simulate a popup
    const div = document.createElement('div');
    Object.assign(div.style, {
        display: "block",
        position: "absolute",
        left: (clientRect.left + window.scrollX) + "px",
        top: (clientRect.top + window.scrollY) + "px",
        width: clientRect.width + "px",
        height: clientRect.height + "px",
        border: "1px solid red"
    });

    document.body.appendChild(div);
    setTimeout(() => {
        document.body.removeChild(div);
    }, 1000)
}