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

如果子元素和父元素都有点击事件，会出现点击事件冒泡的情况。

1.如何避免冒泡：

html：

你好,

战无不胜

[注销]

js：

方法1：

UserLogout.οnclick=function (e) {

e.stopPropagation();//阻止事件冒泡即可

//e.cancelBubble=true;//非标准的IE方式:; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了

}

方法2：

UserLogout.οnclick=function (e) {

//事件处理代码

//实际上是终结了这个(点击)事件，冒泡当然也就停止了。

return false;

}

2.关于事件冒泡

事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。(注意这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。)

var div1 = document.getElementById("div1");

var div2 = document.getElementById("div2");

div2.onclick = function(){alert(1);};

div1.onclick = function(){alert(2);};//父亲

//html代码

当我们在div2里面点击的时候，会发现弹出了一次1，接着又弹出了2，这说明点击的时候，不仅div2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。

标签：function,元素,点击,html,冒泡,div2,事件

来源： https://www.cnblogs.com/vickylinj/p/10940029.html

html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...相关推荐

html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件（$event.cancelBubble=true；）
1. 第一种方法:html中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> & ...
js关于子元素不触发父元素事件的若干方法
2019独角兽企业重金招聘Python工程师标准>>> 方法一:event.cancelBubble=true; /* 最好用,js通用,event.cancelBubble=tru ...
JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
jq父级绑定事件的意义_用jQuery.delegate()将事件绑定在父元素上面
1.先看看官方的示例: $(document).ready(function(){ $("div").delegate("button","click ...
vue中设置子组件的点击事件不影响父组件的点击事件
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 今天分享个技术块儿. 在做项目的过程中,遇到了个问题,简单的描述一下:有一个card卡片,上面绑定了个点击事件,点击c ...
jquery阻止冒泡事件（阻止点击子元素触发父元素）
1.阻止onclick事件采用window.event.stopPropagation(); 示例: **HTML:** <div onclick = "feather()" ...
点击子元素，不触发父元素，catchtap 阻止事件冒泡
wxml: <view class="shade" bindtap="close"><view class ...
React 解决鼠标移入子元素触发父元素的mouseout事件
方法一. 用mouseleave/mouseenter代替mouseover/mouseout[最佳方法] mouseover 与 mouseenter: mouseover => 不论鼠标指针 ...
解决鼠标移入子元素触发父元素的mouseout事件
方法一. 用mouseleave/mouseenter代替mouseover/mouseout[最佳方法] mouseover 与 mouseenter: mouseover => 不论鼠标指针 ...

html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...

html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...相关推荐

最新文章

热门文章