js实现触发子元素事件,而不触发父元素事件

原创 2018年04月17日 13:24:21

在这之前,我们先了解一下

DOM的事件对象:

  1. preventDefault() 取消事件的默认行为
  2. stopPropagation() 取消事件冒泡对当前节点无影响
  3. cancelBubble() 取消事件冒泡

DOM事件处理有三个阶段:

  1. 捕捉阶段(capture phase):从最上层元素,直到最下层(你点击的那个target)元素。路过的所有节点都可以捕捉到该事件。
  2. 命中阶段(target phase):如果该事件成功到达了target元素,它会进行事件处理。
  3. 冒泡阶段(bubbling phase):事件从最下层向上传递,依次触发父元素的该事件处理函数。

在任意一个阶段的事件处理函数中,都可以通过调用event.prepagation()来中断事件流,后续的阶段将不会被调用。

回归正题。我们可以在触发子元素的事件中,事件处理完成后,加一个return false,即可阻止父元素事件的触发。这里我举个,代码如下:

HTML代码:

<div class='parent'>
  <div class='child'></div> 
</div>

JS代码:

 $('.child').bind('click',function(){
    console.log('child');
    return false;
  });
  $('.parent').bind('click',function(){
    console.log('parent');
    return false;
  });

return false做了三件事:

  1. stopPropagation()阻止事件传播
  2. preventDefault()禁止浏览器默认行为
  3. 立即结束当前函数并且返回





Part 10:Cocos2d-x用户事件

-
  • 1970年01月01日 08:00

html如何点击子元素事件而不触发父元素的点击事件

html如何点击子元素事件而不触发父元素的点击事件
  • kerryqpw
  • kerryqpw
  • 2017-07-31 17:27:44
  • 2901

点击子元素事件不触发父元素事件

  • 2014年05月12日 21:59
  • 788B
  • 下载

Jquery实现点击子元素标签只触发子元素点击事件,不触发父元素点击事件

最近写代码遇到一个细节的小问题,点击子元素标签不仅触发了子元素点击事件,还会执行父元素点击事件,例如: 子元素 tabclose="11" > 子元素 为li标签和i标签都添加...
  • bin470398393
  • bin470398393
  • 2017-06-07 09:59:19
  • 4181

jquery防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件

jquery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件...
  • unique_jx
  • unique_jx
  • 2016-09-28 15:52:52
  • 3233

jquery阻止子元素触发父元素的事件的方法

$(sunli).unbind("dblclick").bind("dblclick", function(e) {                     e.stopPropagation();...
  • xingxing513234072
  • xingxing513234072
  • 2013-01-31 18:28:33
  • 12934

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

DOM事件标准定义了两种事件流,分别是捕获和冒泡。默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入use...
  • mafan121
  • mafan121
  • 2015-06-15 14:06:19
  • 7500

关于解决子元素继承父元素事件的问题

子元素不仅可以继承父元素的样式,还可以继承父元素的事件,所以我们可以利用这个原理来实现只给父元素添加一个事件,所有的子元素也相继有了这个事件,但是会有一个问题,当我们触发了子元素父元素也会触发该事件,...
  • bitwusong
  • bitwusong
  • 2017-03-24 17:26:10
  • 253

jQuery如何阻止子元素继承父元素事件?

function f1(e){ alert("你点击了一个链接"); //取消冒泡 e.cancelBubble = true; } f...
  • dxh_0829
  • dxh_0829
  • 2014-06-04 12:52:44
  • 1657

阻止冒泡事件即子元素父元素间的事件继承或传递

#1包括#2,当点击#1区域任何位置时(包括#2),都会触发a事件。想要阻止点击#2区域时触发a事件,需要在#2区域内加入阻止事件冒泡的代码。 变成         其中jav...
  • u598975767
  • u598975767
  • 2016-12-01 16:18:27
  • 1094
收藏助手
不良信息举报
您举报文章:js实现触发子元素事件,而不触发父元素事件
举报原因:
原因补充:

(最多只允许输入30个字)