JS-JQ-事件冒泡
一、冒泡的原理:
子元素会触发父元素的事件
自上而下的触发事件
二、解决方法:
JS:
IE:event.cancelBubble=true
FF:event.stopPropagation()
JQ:
ev.stopPropagation()
!!! - CSS
<style>
.div1{width:800px;height:500px;padding:100px;box-sizing: border-box;background:rosybrown;}
.div2{width:500px;height:200px;background:#269ABC;}
</style>
!!! - HTML
<div class="div1">
<div class="div2"></div>
</div>
!!! - JavaScript
window.οnlοad=function()
{
var div1=document.getElementsByClassName('div1')[0];
var div2=document.getElementsByClassName('div2')[0];
div1.οnclick=function()
{
alert('我是DIV1');
}
div2.οnclick=function(ev)
{
var oEvent=ev||event;
if(ev.cancelBubble)
{
oEvent.cancelBubble=true;
}
else
{
oEvent.stopPropagation();
}
alert('我是DIV2');
}
}
!!! - JQuery
$(function(){
$('.div1').click(function(){
alert('我是DIV1');
});
$('.div2').click(function(ev){
alert('我是DIV2');
ev.stopPropagation();
});
})
转载于:https://www.cnblogs.com/xiaoyangtian/p/7922118.html
- 点赞
- 收藏
- 分享
- 文章举报
- js事件冒泡与jq的live事件
- 我的JavaScript回顾之路_05—0210—js和jq绑定事件的区别/事件冒泡
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- js事件冒泡
- js事件冒泡、事件绑定、事件监听、事件委托
- js或jquery阻止向上冒泡事件
- js阻止默认事件与js阻止事件冒泡
- JS事件冒泡
- 了解DOM的事件流,Js事件捕获与冒泡分析,JS阻止事件传递!
- 什么是JS事件冒泡?(网络)
- 阻止js事件冒泡的例子(cancelBubble 、stopPropagation)
- JS学习:了解事件冒泡和事件捕获
- JS事件冒泡
- JS事件——禁止事件冒泡和禁止默认事件
- js html 事件冒泡
- JS学习之事件冒泡
- 关于JS事件冒泡与JS事件代理(事件委托)
- JS停止事件冒泡
- 原生js深入理解系列(三)--- 事件冒泡的分析以及如何防止事件冒泡
- 第3课 03 JS中级课程-事件流-事件冒泡机制-3