突出显示 p 中的文本时，Javascript onclick 不起作用答案

【问题标题】：Javascript onclick does not work when highlighting text in p突出显示 p 中的文本时，Javascript onclick 不起作用
【发布时间】：2013-06-01 20:15:46
【问题描述】：

我正在尝试创建一个脚本来检测一个人何时完成突出显示文本。为此，我在包含 p 的 div 中有一个 onclick 事件，其中包含文本。如果您单击黄色区域中的任意位置，则单击事件上应出现警报框。如果您突出显示文本的一部分（但不是一直到文本的末尾！）该事件将触发。

当您突出显示并包含最后一个单词“text”时，会出现该错误。该事件不会触发。

我可以在 Chrome 和 Safari 中复制它，但在 Firefox 中似乎可以正常工作。没有测试过 IE。

<html>
    <head>
        <style>
            div{background-color:#FFFF00}
        </style>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>

            function mouseClicked()
            {
                alert("mouseClicked");
            }
        </script>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>



    </div>
        <div onClick='mouseClicked()'>
            <p>Try to highlight this text</p>
        </div>
    </body>


</html>

有什么想法吗？谢谢，克山提

编辑：刚刚发现它适用于这样使用的 onmouseup 事件： document.onmouseup=mouseClicked;

来自Javascript: How to detect if a word is highlighted

虽然它不适用于 onclick，但仍然很奇怪。

【问题讨论】：

如果您在元素外释放鼠标，则您没有单击该元素。在我看来，它按预期工作。
在 Dancrumb 的回答中查看我的评论...我输入了背景颜色以确保我没有超出元素。

标签： javascript onclick

【解决方案1】：

我写了一些代码来说明这个问题。我发现在 FireFox 中问题已部分解决，但在 Chrome 中没有。代码在：http://jsfiddle.net/3NUfv/3/

<div id = "div1">
<p id = "text">
    Try to highlight this texT
</p>
<br>
</div>
<p id = "downForDiv"></p>
<p id = "downForP"></p>
<p id = "upForDiv"></p>
<p id = "upForP"></p>
<p id = "clickForDiv"></p>
<p id = "clickForP"></p> 
<button id = "clear">clear</button>

一旦您尝试突出显示某些文本，有关鼠标上下位置的说明将显示在屏幕上。

我已经在 FireFox 和 Chrome 中打开了 jsfiddle 代码。 FireFox 中的坏情况是，当您突出显示某些文本并将鼠标从黄色区域移动到绿色区域时，将检测到 mousedown 和 mouseup，但不会检测到单击。

如果您只是在 FireFox 中突出显示黄色区域中的某些文本，则可以检测到点击。

我认为这可能与浏览器的设计有关。

【讨论】：

【解决方案2】：

当浏览器检测到 mousedown 事件，然后在同一元素上触发 mouseup 事件时，就会触发 click 事件。

奇怪的是，您将鼠标移到释放鼠标时触发 mousedown 的元素之外。由于您在同一元素上没有向下对，因此您不会获得点击。

【讨论】：

我也是这么想的，但这就是为什么我把背景颜色放进去以知道我没有超出那个文档元素。
您将超出<P> 元素。
但是 onclick 在 div 中，如果你点击更远的地方它就可以工作:)