javascript - jquery dblclick事件无法停止事件传播

标签 javascript jquery

我在 div 上双击事件处理程序,然后在按钮(该 div 的子级)上单击事件处理程序。 但是当我点击按钮两次时,div的 dblclick 事件发生(参见 http://jsfiddle.net/9dcSk/3/ )。

<!DOCTYPE html>
<html>
    <head>
        <script src="/bs21/js/jquery-1.10.1.min.js"></script>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body,html {
                background:yellow;
            }
            .myDiv {
                background:pink;
                padding:40px;
            }
        </style>
        <script>
            $( document ).ready( function() {
                $('div.myDiv').click( function() {
                    console.log('div dbl clicked');
                } );
                $('button.myButton').click( function(event) {
                    console.log('button clicked');
                } );
            });
        </script>
    </head>
    <body>
        <div class=myDiv>test<button class=myButton>ok</button></div>
    </body>
</html>

我试图将 e.stopPropagation() 添加到点击事件,但这没有帮助。

最佳答案

您应该做的是在 div 调用之前在按钮双击上返回 false。

即:

$('button.myButton').click( function(e) {
    $('div#log').append('<div>btn clicked</div>');
});
$('button.myButton').dblclick( function(e) {
    return false
});
$('div.myDiv').dblclick( function(e) {
    $('div#log').append('<div>div dblclicked</div>');
});

JSFIDDLE:http://jsfiddle.net/javascript/9dcSk/5/

关于javascript - jquery dblclick事件无法停止事件传播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17674658/

相关文章:

javascript - JavaScript 中的闭包

javascript - 简单的 CSS 梯度检测

javascript - 基本 2D 人形火柴人的逆向运动学原理

javascript - 如何实现滚动到固定效果?

Jquery - 如何查找 #tag 名称并应用类

javascript - jQuery 在 div 内垂直滚动图像

javascript - jQuery .On() 不使用从对象传递的参数触发

javascript - jQuery 将一个 div 包裹在一个巨大的 HTML block 中

javascript拆分数组中的字符串

jquery 按钮取消选中复选框