原地址:http://missra.com/article/web-57.html

嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下JavaScript阻止默认事件与JavaScript阻止事件冒泡示例。

(1)阻止冒泡事件

注:嵌套元素一般都存在冒泡事件,会带来某些影响

最外层标签:outer,中间层标签:center,最内层标签:inner,并且在outer、center、inner都添加了alert弹框事件,在正常思维情况下如果只点击内层元素,只会弹出绑定在该元素上的alert事件,但是,由于冒泡事件的原因,如果只点击内层元素首先触发被点击的内层元素的事件,然后会依次向外(向上级)冒泡触发外层事件,如下:

outer

center

inner

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代码阻止冒泡事件后效果如下:

outer

center

inner

(2)阻止默认事件

在前端开发工作中,由于浏览器兼容性等问题和一些特殊用处,比如禁止浏览器右键、禁止浏览器菜单等,需要用到阻止浏览器的默认事件

示例:阻止超链接

如下链接

http://www.missra.com

阻止打开链接此默认事件,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脚本后的效果如下:

http://www.missra.com

点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到玫莎了(备注:由于网站编辑器的原因无法给链接添加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如果阻止事件冒泡和浏览器默认事件的更多相关文章

  1. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  2. JS 事件冒泡整理 浏览器的事件流

    JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...

  3. JS事件——禁止事件冒泡和禁止默认事件

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...

  4. javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件

    1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...

  5. JS阻止事件冒泡与浏览器默认行为

    阻止冒泡 W3C的方法是e.stopPropagation() IE是e.cancelBubble = true; 阻止默认行为 W3C的方法e.preventDefault(), IE是e.retu ...

  6. 理解阻止浏览器默认事件和事件冒泡cancelBubble

    一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...

  7. 一个取消事件的简单js例子(事件冒泡与取消默认行为)

    先上代码: <div id='outer' onclick='alert("我是outer")'> <div id="middle" oncl ...

  8. js /jquery停止事件冒泡和阻止浏览器默认事件

    1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...

  9. javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...

随机推荐

  1. Linux下OpenSSL 安装

    安装环境:  操作系统:CentOs6.3 OpenSSL Version:openssl-1.0.0e.tar.gz 目前版本最新的SSL地址为http://www.openssl.org/sour ...

  2. iframe与include的区别

    iframe与include区别和使用问题 1.iframe可以用在静态和动态页面,include只能用在动态页面. 2.iframe是视图级组合,include是代码级组合. 3.iframe独立成 ...

  3. iOS开发中使用CIDetector检测人脸

    在iOS5 系统中,苹果就已经有了检测人脸的api,能够检测人脸的位置,包括左右眼睛,以及嘴巴的位置,返回的信息是每个点位置.在 iOS7中,苹果又加入了检测是否微笑的功能.通过使用 CIDetect ...

  4. Centos下安装FTP并进行虚拟用户访问方式配置

    1. 安装认证所需包 [root@localhost]#yum install pam* [root@localhost]#yum install db4* 首先安装PAM(用于用户认证)和DB4(用 ...

  5. 【28】避免返回handles指向对象内部成分

    1.为什么? 很简单,你指向箱子里面的一个物品,使用这个物品.但是箱子不受你控制,箱子销毁了,里面的物品也会随之销毁.那么这种情况下,你指向的就是一堆垃圾,你还在使用这个物品,导致未定义的行为.

  6. [React] React Fundamentals: Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  7. java21 封装Response:

    封装Response: /** * 封装响应信息 */ public class Response { //两个常量 public static final String CRLF="\r\ ...

  8. orczhou----MYSQL

    https://yq.aliyun.com/users/1597777588650149?spm=5176.blog11192.yqblogcon1.2.5mdGQb

  9. C# - 转换

    无论什么类型 它们存储的其实都是一系列的位 在将A类型转换为B类型时 如果能完整转换 那么系统会将两个操作数自动进行隐式转换 但也有可能因为A类型的存储位数比B类型的存储位数大 那么B类型可能就没有足 ...

  10. 获取随机颜色js

    获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...