禁用雙擊當孩子元素上雙擊使用CSS或jQuery的

Question

I created project demo from here

當我雙擊孩子的元素，所以家長的元素會同時觸發。我不希望在父觸發器的元素上發生雙擊事件，所以任何人都可以幫助我？謝謝

<style> 
    #parent { 
     width: 200px; 
     height: 200px; 
     position: relative; 
     border: 1px solid black; 
    } 

     #parent:hover { 
      cursor: pointer; 
      background: green; 
     } 

    #children { 
     width: 100px; 
     height: 100px; 
     position: absolute; 
     top: 10px; 
     left: 10px; 
     border: 1px solid black; 
    } 

     #children:hover { 
      cursor: pointer; 
      background: blue; 
     } 
</style> 
<div id="parent"> 
    <div id="children"></div> 
</div> 
<script> 
    $('#children').dblclick(function() { 
     alert('children'); 
    }); 
    $('#parent').dblclick(function() { 
     alert('parent'); 
    }); 
</script> 

Answer 1

您需要使用event.stopPropagation（）;爲子元素。

$('#children').dblclick(function (event) { 
    event.stopPropagation(); 
    alert('children'); 
}); 

您可以通過以下鏈接瞭解關於它的更多信息。 http://javascript.info/tutorial/bubbling-and-capturing