Question

我使用下面的代码来获取用户双击的文本：

<html>
    <script language="javascript">
        document.ondblclick = function() {
            alert(GetSelectedText());
        }

        function GetSelectedText() {
            if (document.selection) {
                return document.selection.createRange().text;
            }
        }
    </script>

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>

    <body>
        <div id="should_trigger_event">sample of a text!</div>
        <div id="should_not_trigger_event">sample of a text!</div>
    </body>

</html>

我希望ondblclick事件为id为should_trigger_event的div启动，而不是为id为should_not_trigger_event

的div启动

我们如何实现这一目标？

Answer 1

使用jQuery很简单：

<script language="javascript">
$(document).ready(function(){
   $('#should_trigger_event').on('dblclick',function(){
      alert(GetSelectedText());
   });
});

    function GetSelectedText() {
        if (document.selection) {
            return document.selection.createRange().text;
        }     
    }
</script>

有关
的更多信息 jQuery Selectors
jQuery double click binding

Answer 2

为什么不使用元素ID绑定点击事件：

$(function(){
  $('#should_trigger_event').click(function(){
     if (document.selection) {
             return document.selection.createRange().text;
}});});

Answer 3

您可以直接将处理程序分配给要包含的div ...

var div = document.getElementById('should_trigger_event');
div.ondblclick = function() {
    alert(GetSelectedText());
}

或者如果您想要整个文档的处理程序，可以检查事件对象中的target

document.ondblclick = function(e) {
if(e.target.id != 'should_not_trigger_event')
        alert(GetSelectedText());
    }

如何排除div触发此事件？

3 个答案: