javascript - jQuery .click 不会触发跨越多个元素的用户选择事件

Question

我有一个函数(仍在开发中)需要捕获用户在 div 中选择的文本(不是文本区域和输入框，因此 .select 不起作用。)。当选择内容包含在该 div 中的单个元素内时，使用 .click 以及选择和范围对象效果很好，但如果用户选择跨越 div 中的多个元素(例如多个 p)，则无法触发。

    $('.relevantDivClass').click(function(){
        console.log('Got here');
        SelObj = window.getSelection();
        Range = SelObj.getRangeAt(0);
        if (SelObj.anchorNode == SelObj.focusNode){
            console.log('executing same node branch');
            string = SelObj.toString();
            console.log(string)
        }
        else{
            console.log('executing multiple node branch');
            //code...
        }
    });

关于如何在这种情况下触发该事件有什么想法吗？它仍然在 relevantDivClass 内，所以我很困惑为什么 .click 不会触发。

Answer 1

使用.mouseup()而不是.click() 。当突出显示多个段落中的文本时，“mouseup”事件不会在触发“mousedown”的同一元素上触发——这是“click”事件的定义。 .click()适用于单个段落，因为您会在 <p> 上同时触发“mousedown”和“mouseup”元素，并且它向上冒泡到其父元素 <div> .

Working Demo

$(function() {
    $('.relevantDivClass').mouseup( function() {
        alert('Got here');
        SelObj = window.getSelection();
        Range = SelObj.getRangeAt(0);
        if (SelObj.anchorNode == SelObj.focusNode){
            alert('executing same node branch');
            string = SelObj.toString();
            alert(string)
        }
        else{
            alert('executing multiple node branch');
            //code...
        }
    });
});
​