jquery阻止子元素继承父元素事件

2018-2-9    分类: 前端资源

阻止 继承

html:

<div id="fa">
   <div id="son">
   </div>
</div>

 

js:

$(function () {

 $('#fa').click(function (e) {
    console.log('fa')
 });

});

以上的dom结构,son永远都是在fa的里面,当点击到son的时候其实也点击到了fa,如果希望仅仅只是点击fa才能触发时,而点击son不能触发。代码修改如下:

$('#fa').click(function (e) {
  e.stopPropagation();
  console.log('fa')
});

$('#son').click(function (e) {
  //或者 e.stopPropagation();
  console.log('son');
  return false;
});

其实很简单思维转变一下,干脆给所有子元素都添加阻止冒泡事件即可。