0

我在 div 上有双击事件处理程序，并在按钮上单击事件处理程序，即 div 的子项。但是当我点击按钮 2 次时，会发生 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()到点击事件，但这没有帮助。

4

2 回答 2

7

您应该做的是在 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/

于 2013-07-16T11:05:30.943 回答
0

这可以解决问题。

   $('div.myDiv').dblclick( function(e) {
      if(e.target.nodeName === "BUTTON" ){
                return false;
         }
    $('div#log').append('<div>div dblclicked</div>');
    });

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

小提琴演示

于 2013-07-16T11:29:23.873 回答