禁用双击当孩子元素上双击使用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