JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html
嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下JavaScript阻止默认事件与JavaScript阻止事件冒泡示例。
(1)阻止冒泡事件
注:嵌套元素一般都存在冒泡事件,会带来某些影响
最外层标签:outer,中间层标签:center,最内层标签:inner,并且在outer、center、inner都添加了alert弹框事件,在正常思维情况下如果只点击内层元素,只会弹出绑定在该元素上的alert事件,但是,由于冒泡事件的原因,如果只点击内层元素首先触发被点击的内层元素的事件,然后会依次向外(向上级)冒泡触发外层事件,如下:
HTML:
1
2
3
4
5
|
<div id="outer" onclick="alert('Outer');">outer <div id="center" onclick="alert('Center');">center <div id="inner" onclick="alert('Inner');">inner</div> </div> </div> |
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
#outer { width:300px; border:1px solid #888; text-align:center; backgrond-color:#888; margin:0 auto; } #center { margin:20px; border:1px solid #aaa; text-align:center; backgrond-color:#aaa; } #inner { margin:20px; border:1px solid #ccc; text-align:center; text-align:center; backgrond-color:#ccc; } |
试想如果在项目开发中,某个按钮和他的父级同时绑定了很重要的事件,那么结果会惨不忍睹,这时的处理方法就是阻止冒泡事件,用下面的JS来阻止冒泡事件的发生。
JS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
var outerDom = document.getElementById("outer"); var centerDom = document.getElementById("center"); var innerDom = document.getElementById("inner"); //阻止冒泡事件 function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } //等价语句 //window.event ? e.stopPropagation() : window.event.cancelBubble = false; } //为每个元素对象添加监听事件,如果监听到元素触发"click"事件,就引用上面阻止冒泡的方法stopBubble()来阻止冒泡事件的发生 outerDom.addEventListener("click",function(e) { stopBubble(e); })//阻止outer冒泡 centerDom.addEventListener("click",function(e) { stopBubble(e); })//阻止center冒泡 innerDom.addEventListener("click",function(e) { stopBubble(e); })//阻止inner冒泡 |
用以上的JS代码阻止冒泡事件后效果如下:
(2)阻止默认事件
在前端开发工作中,由于浏览器兼容性等问题和一些特殊用处,比如禁止浏览器右键、禁止浏览器菜单等,需要用到阻止浏览器的默认事件
示例:阻止超链接
如下链接
阻止打开链接此默认事件,JS代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13 var aDom = window.document.getElementById("a");
aDom.onclick = function (e) {
//如果提供了事件对象,则这是一个非IE浏览器
if (e && e.preventDefault) {
//阻止默认浏览器动作(W3C)
e.preventDefault();
}
else {
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
return false;
}
}
使用以上JS脚本后的效果如下:
点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到玫莎了(备注:由于网站编辑器的原因无法给链接添加ID,所以演示的链接还是能打开)。
(3)jQeury阻止默认和冒泡事件
备注:一下代码中的"a"是元素标签,可以是"#id"或者".class"或者DOM对象
阻止冒泡事件
1
2
3 $("a").click(function (e) {
e.stopPropagation();
});
阻止默认事件
1
2
3 $("a").click(function (e) {
e.preventDefault();
});
阻止默认和冒泡事件
1
2
3 $("a").click(function (e) {
return false;
});
JS如果阻止事件冒泡和浏览器默认事件的更多相关文章
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- JS 事件冒泡整理 浏览器的事件流
JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...
- JS事件——禁止事件冒泡和禁止默认事件
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...
- javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件
1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...
- JS阻止事件冒泡与浏览器默认行为
阻止冒泡 W3C的方法是e.stopPropagation() IE是e.cancelBubble = true; 阻止默认行为 W3C的方法e.preventDefault(), IE是e.retu ...
- 理解阻止浏览器默认事件和事件冒泡cancelBubble
一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...
- 一个取消事件的简单js例子(事件冒泡与取消默认行为)
先上代码: <div id='outer' onclick='alert("我是outer")'> <div id="middle" oncl ...
- js /jquery停止事件冒泡和阻止浏览器默认事件
1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...
- javascript阻止事件冒泡和浏览器的默认行为
1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...
随机推荐
- Linux下OpenSSL 安装
安装环境: 操作系统:CentOs6.3 OpenSSL Version:openssl-1.0.0e.tar.gz 目前版本最新的SSL地址为http://www.openssl.org/sour ...
- iframe与include的区别
iframe与include区别和使用问题 1.iframe可以用在静态和动态页面,include只能用在动态页面. 2.iframe是视图级组合,include是代码级组合. 3.iframe独立成 ...
- iOS开发中使用CIDetector检测人脸
在iOS5 系统中,苹果就已经有了检测人脸的api,能够检测人脸的位置,包括左右眼睛,以及嘴巴的位置,返回的信息是每个点位置.在 iOS7中,苹果又加入了检测是否微笑的功能.通过使用 CIDetect ...
- Centos下安装FTP并进行虚拟用户访问方式配置
1. 安装认证所需包 [root@localhost]#yum install pam* [root@localhost]#yum install db4* 首先安装PAM(用于用户认证)和DB4(用 ...
- 【28】避免返回handles指向对象内部成分
1.为什么? 很简单,你指向箱子里面的一个物品,使用这个物品.但是箱子不受你控制,箱子销毁了,里面的物品也会随之销毁.那么这种情况下,你指向的就是一堆垃圾,你还在使用这个物品,导致未定义的行为.
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- java21 封装Response:
封装Response: /** * 封装响应信息 */ public class Response { //两个常量 public static final String CRLF="\r\ ...
- orczhou----MYSQL
https://yq.aliyun.com/users/1597777588650149?spm=5176.blog11192.yqblogcon1.2.5mdGQb
- C# - 转换
无论什么类型 它们存储的其实都是一系列的位 在将A类型转换为B类型时 如果能完整转换 那么系统会将两个操作数自动进行隐式转换 但也有可能因为A类型的存储位数比B类型的存储位数大 那么B类型可能就没有足 ...
- 获取随机颜色js
获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...