<html> <head> <title>event.stopPropagation</title> </head> <body> <div id="outer"> <div id="inner"></div> </div> </body> </html>
<script type="text/javascript"> $(function(){ $("#outer").click(function(){ alert(2); }); $("#inner").click(function(){ alert(3); }); }); </script>
针对上面的这些html 代码和js ,会造成一个情况就是触发 inner的click事件时会触发他的父元素的click事件,为了在触发inner的click事件的时候,不触发父元素,
就需要运用到jquery 中的 event.stopPropagation,该方法就是在点击子元素时,阻止触发父元素的方法,具体可查看http://api.jquery.com/event.stopPropagation/
针对这个现象,我写了下面的这个Js
<script type="text/javascript"> $(function(){ $("#outer").click(function(){ alert(2); }); $("#outer").mousedown(function(event){ event.stopPropagation(); }); $("#inner").click(function(){ event.stopPropagation; alert(3); }); }); </script>