所属分类:web前端开发
方法:1、利用stopPropagation()方法禁止,但不会阻止默认行为,语法“event.stopPropagation()”;2、利用return方法禁止,同时阻止默认行为,语法“function(){return false}”。
前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用
本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。
原生 JS 中,对事件对象 (event) 有 2 种主要的方法;
stopPropagation 和 preventDefault
第一个是禁止冒泡,第二个是阻止默认行为
注:这是原生 JS 的方法,并非 jQuery 的方法,event 形参可以为任何变量,比如用 e 这个也可以的;
ele.onmouseover=function(event){
event=event||window.event;
if(event.stopPropagation){
event.stopPropagation();//标准留言器中禁止冒泡;
// preventDefault中文意思是阻止默认行为;
}else{
e.cancelBubble=true;//IE浏览器禁止冒泡;IE678
}
}
登录后复制
登录后复制
1、事件的禁止冒泡
ele.onmouseover=function(event){
event=event||window.event;
if(event.stopPropagation){
event.stopPropagation();//标准留言器中禁止冒泡;
// preventDefault中文意思是阻止默认行为;
}else{
e.cancelBubble=true;//IE浏览器禁止冒泡;IE678
}
}
登录后复制
登录后复制
2、return 的阻止
ele.onmouseover=function(){
return false
}
登录后复制
区别。
return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。
event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。
整理:
1.event.stopPropagation();
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(可执行超链接的跳转)
2.return false;
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(不执行超链接的跳转)
还有一种有冒泡有关的:
event.preventDefault();
登录后复制
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)
【相关推荐:javascript视频教程、web前端】
以上就是javascript怎么禁止事件冒泡的详细内容,更多请关注zzsucai.com其它相关文章!