Question

我有一个功能（仍处于开发阶段），需要捕获div中的用户选定文本（不是文本区域和输入框，因此.select不起作用。）。当选择包含在该div中的单个元素中时，使用.click和selection和range对象可以很好地工作，但如果用户选择跨越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...
        }
    });

有关如何在该情况下触发该事件的任何想法？它仍然在相关的DivClass中，所以我很困惑为什么.click不会触发。

提前致谢！

Answer 1

希望使用最新的jQuery版本，请改用：

$(".relevantDivClass").on("click", function() { /* code */ });

Answer 2

使用.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...
        }
    });
});

Jquery .click不会触发跨多个元素的用户选择事件

2 个答案: