2013-07-16 3 views
0

У меня есть обработчик события двойного щелчка на div и нажмите кнопку обработчика события на кнопке, которая является дочерним элементом div. , но когда я нажимаю кнопку 2 раза, происходит событие dblclick div (см. http://jsfiddle.net/9dcSk/3/).
Событие jquery dblclick не может остановить распространение события

<!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() щелкнуть событие, но это оленья кожа помогает.

+0

Что вы пытаетесь достичь? – jQuerybeast

+0

, когда я нажимаю на кнопку, не должно происходить событие dblclick div. – Suic

ответ

6

Что нужно сделать, это вернуть false на кнопку , дважды щелкнув перед вызовом div.

То есть:

$('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/

+0

отлично работает! Спасибо! – Suic

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>'); 
    }); 

Fiddle Demo

Смежные вопросы