javascript - 正确触发 onmouseup 元素

Question

我有以下 html 结构:

 <div id="grandparent">
    <div id="parent">
            <p>
                high light me with mouse!! highlight me with mouse!!highlight me with mouse!!

            </p>

</div>
</div>

我有这个 js 代码:

$(document).mouseup(function (event) {
        var target=event.target;
        target=$(target);
        var parent = target.parent();
        console.log(parent.parent().attr("id"));
            if (window.getSelection) {
            var selection = window.getSelection();
            selectedText = selection.toString();
                console.log(selectedText);
            }
        });

所以这段代码只是控制台记录选定的文本。

但我有一个问题 - 当我没有点击我的 <p> 时元素和文档 - 然后我移动鼠标以选择按住左键的文本我无法获得父 div 的 id 因为

var target=event.target;

目标成为文档元素

Answer 1

更改 $(document).mouseup( 为 $("#parent").mouseup( .

代码:

$("#parent").mouseup(function (event) {
  var target=event.target;
  target=$(target);
  var parent = target.parent();
  console.log(parent.parent().attr("id"));
  if (window.getSelection) {
    var selection = window.getSelection();
    selectedText = selection.toString();
    console.log(selectedText);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grandparent">
    <div id="parent">
            <p>
                high light me with mouse!! highlight me with mouse!!highlight me with mouse!!

            </p>

</div>
</div>