JavaScript 阻止事件冒泡

最新推荐文章于 2023-04-06 17:49:45 发布
最新推荐文章于 2023-04-06 17:49:45 发布
阅读量123 收藏
点赞数
文章标签： javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48009509/article/details/120699887
版权

阻止事件冒泡的方法，包括兼容IE浏览器（e.cancelBubble ）和标准浏览器（e.stopPropagation ）。
实例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .father {
                position: relative;
                width: 100px;
                height: 100px;
                background-color: aqua;
            }
            .son {
                position: absolute;
                width: 50px;
                height: 50px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="father" onclick="f()">
            <div class="son" onclick="s()"></div>
        </div>

        <script>
            function f() {
                alert('father');
            }
            function s(e) {
                alert('son');
                // 阻止事件冒泡
                var evt = e || window.event;
                evt.stopPropagation
                    ? evt.stopPropagation()
                    : (evt.cancelBubble = true);
            }
        </script>
    </body>
</html>
南穑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript事件冒泡
qq3305559894的博客
03-10 1406
今天我要分享的JavaScript事件冒泡的知识点 1.知识点分享 JavaScript 事件冒泡主要是声明变量，获取点击事件，触发点击事件的动画； 2.就是JavaScript的触发动画效果和点击事件 3.以下是html的知识点代码如下： 正在上传…重新上传取消 还有css的样式代码如下图： 给body，box,innerBox设置背景颜色。 正在上传…重新上传取消 Js 代码如下图所示： 首先获取box，在获取innerBox给innerBox添加绑定点击事件。事件对象event=even
JS中阻止事件冒泡的办法
baidu_39567828的博客
01-30 1090
本案例使用的是layui的面板元素               发布         百度           $(".layui-btn-xs").on('click',function(e){ e.stopPropagation(); layer.confirm('确定要发布？',{title: "系统提示",
js 阻止事件冒泡
weixin_44805839的博客
06-30 8028
js 阻止事件冒泡
javascript阻止事件冒泡和浏览器的默认行为
viana37的博客
03-03 552
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF]   1.阻止事件冒泡,使成为捕获型事件触发机制. 1 2 3 4 5 6 7 8 9 fun
JS中阻止冒泡事件的三种方法
热门推荐
小小前端
07-17 6万+
冒泡事件：比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。 <div class="box"> <button class="btn">按钮</button> </div> <script type="text/javascript"> $('.btn').click(functio...
如何在js中解决阻止事件冒泡问题？
Code_King006的博客
04-06 1568
内联onclick事件虽然没有显式的传入event对象，但是在click事件中还是可以使用event对象的，不过这里有个细节需要注意，那就是event总是保存着最后发生的那个事件对象的信息。事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne。会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度。运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层。---->然后再链接到百度.
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
m0_48895748的博客
12-07 8948
快速理解阻止事件冒泡的4种方法，使用原生js或者vue中阻止事件冒泡
JavaScript阻止事件冒泡示例分享
10-24
主要分享了一则JavaScript阻止事件冒泡示例,需要的朋友可以参考下
兼容各大浏览器的JavaScript阻止事件冒泡代码
10-23
本文给大家分享的是一段兼容各大浏览器的JavaScript阻止事件冒泡代码，虽然因为时间问题没有深入研究，但是还是相当不错的，这里推荐给大家
js中的事件冒泡与事件捕获
~~~
03-24 2433
js中的事件冒泡与事件捕获。当点击黑色容器时，开始进行事件捕获，Js事件流从window上往事件触发处传播，遇到注册的捕获事件就会触发；但是捕获阶段默认是不处理的（addEventListener第三个参数默认是false）,紧接着传播到事件触发处，触发注册的事件，打印div3，然后进行冒泡阶段从事件触发处 往window上传播，遇到注册的冒泡事件会触发，打印div2，再打印div1。就是因为点击了盒子的子元素（黄色和红色部分），事件冒泡到了绑定拖拽事件的父元素身上（蓝色部分），导致触发的是拖拽效果。
js中阻止事件冒泡的几种方法
qq_53217825的博客
11-03 1137
解决方法：事件结束后添加event.stopPropagation().注：ie8以下不支持。冒泡事件即：触发子节点中的方法，父节点也注册了相同的方法，会导致父节点也响应该方法。依次打印出： bubbling，three，two，one,一级一级往上一层触发。例如以下：店家button按钮，触发bubbling事件。
JS如何阻止冒泡事件
weixin_44104809的博客
09-01 1万+
1、背景 1.1 什么是事件冒泡 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。 优点：事件委托可以利用事件冒泡，来达到只指定一个事件处理程序就可以管理某一项类型的所有事件的效果，只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少，整个页面占据的内存空间更少，能够提升整体性能。 1.2 特殊需求 菜单栏的每一项增加一个编辑和删除按钮，因为菜单自带点击事件，在我们点击每个菜单的编辑或删除按钮时候还会去执行一遍菜单执行的操作，这种情况我们就需要阻止编辑和删除按钮的
JavaScript-----阻止事件默认行为和事件冒泡
weixin_45904557的博客
06-10 2177
目录一.阻止事件默认行为1.preventDefault();方法2.低版本浏览器 returnValue属性3.return false;e.stopPropagation();e.cancelBubble = true; 阻止事件冒泡的兼容性解决方案阻止事件默认行为的三种方法: 以下是没有阻止冒泡行为的示例,会从最具体的元素向上床底: //stop 停止 Propagation传播//ie cancel取消 bubble泡泡 阻止冒泡排序之后:...
js阻止冒泡的两种方法
Smallwhitestrive的博客
09-26 1万+
冒泡是一种很有意思的现象，在我们的 js 中也有冒泡现象，让我们一起去看看吧 先来看一段代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onclick="bo()"> <div onclick="d()"> <button onclick="b()"
js阻止事件冒泡的两种方法
阿哲的博客
01-18 4万+
一、冒泡事件简介 当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。 方法一：event.stopPropagation( ); 例如：     段落文本内容         type="button" value="点击" />     html代码： // 为所有div元素绑定click事件 $("div")
javascript-阻止事件冒泡和事件默认行为
leon的博客
07-14 6706
javascript阻止事件冒泡和默认事件
javascript 事件冒泡及其阻止方法
友人C君的博客
03-04 723
什么是JS事件冒泡？： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 什么时候阻止事件冒泡...
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡
weixin_30718391的博客
12-07 601
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡 　　事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape，但是前者提出的是我们常用的事件冒泡流，而后者提出的是事件捕获流。 第一部分：事件冒泡 　　即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。 　　下面举一个简单的例子： <!DOCTYPE html> &lt...
javascript阻止事件冒泡
最新发布
06-06
在JavaScript中，阻止事件冒泡的通用方法是使用event.stopPropagation()方法。当在一个DOM元素上触发某个事件时，浏览器会将此事件对象event作为函数的参数传递到事件监听器函数中。在事件监听器中，通过调用event....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值