js阻止事件冒泡的发生

最新推荐文章于 2022-11-29 10:45:24 发布
最新推荐文章于 2022-11-29 10:45:24 发布
阅读量279 收藏
点赞数
分类专栏： JS从认识到入门 文章标签： js阻止冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36818386/article/details/82226101
版权

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
         #outer{
           position: relative;
           width:400px;
           height: 400px;
           background:yellow;
         }
        #inner{
             position: absolute;
             width:100px;
             height: 100px;
             background:cyan;
        }
    </style>
</head>
<body>
    <div id="outer">
         <div id="inner"></div>
    </div>
</body>
</html>
<script type="text/javascript">
         var inner  = document.getElementById("inner");
         var outer = document.getElementById("outer");

         inner.onclick = function  (event)
           {
            var event = event||window.event;

            //能力检测
           if(event.stopPropagation)
           {
               //高级浏览器写法
               event.stopPropagation();
           }
           else
           {
               //对于IE低级浏览器写法
               event.cancelBubble = true;
           }
             console.log("inner");
           }

         outer.onclick = function  (argument) {
             console.log("outer");
           }
</script>

我们先来介绍下冒泡事件：

   不管是DOM 0级事件还是DOM 2都有冒泡阶段存在,事件对象(event)可以通过一些属性、方法来阻止事件冒泡.

 

阻止冒泡后变化：

 

 

有什么问题欢迎留言！~~~~~

 

丸子哥哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
js阻止冒泡及jquery阻止事件冒泡示例介绍
12-11
js阻止冒泡 在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性，它的值比事件句柄的返回值...
阻止事件冒泡的两种方法
zhm0303的博客
09-25 1万+
何为冒泡：       即事件开始是由最具体的元素接收，然后逐层向上级传播到较为不具体的元素。 加入一个button和它的父级div同时定义了onclick事件，点击button时，在触发了button的onclick事件之后，会发生事件冒泡，然后触发div的onclick事件，然而，触发button的onclick事件的同时也触发div的onclick事件显然不是我们想要的，此时，可以阻止冒...
阻止事件冒泡方法
weixin_57157220的博客
07-09 1万+
阻止事件冒泡方法 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不止事件向document上蔓延，但是默认事件任然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法时，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素 3.return false; 这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件，不仅阻止了事件往上冒泡，而且阻止了事件本身
js 阻止事件执行
weixin_30697239的博客
04-11 2297
三种阻止事件执行的方式 event.preventDefault() event.stopPropagation() return false event.preventDefault() 阻止特定事件的默认行为（只有 cancelable 设置为 true 的事件才可以使用），比如：点击 type="submit" 的 input 标签提交表单，你在 onclick ...
js阻止冒泡事件发生(react)
秋叶原的黑猫的博客
11-29 676
其实就两个函数。
如何阻止事件冒泡
庸人方自扰，自在就好
01-27 1万+
1、事件处理过程中，阻止了事件冒泡，但不会阻止默认行为（执行超链接的跳转）2、事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不执行超链接的跳转）3、事件处理过程中，不阻止事件冒泡，但阻止默认行为（父元素以上全部会触发该事件，但不执行超链接跳转）
JS阻止冒泡事件以及默认事件发生的简单方法
12-12
如果是在里面，那么呢，有一个onclick事件，也有onclick事件，为了触发的点击事件时，不触发父元素的点击事件，...如果要阻止默认事件的触发，即默认的href事件，那么就需要调用如下函数： 代码如下:function stopD
事件冒泡是什么如何用jquery阻止事件冒泡
10-27
什么是事件起泡：一个事件不能凭空产生，这就是事件的发生等等，接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证，感兴趣的朋友可以参考下哈
Js 冒泡事件阻止实现代码
12-08
而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中...
js 阻止事件
ayuqian6000的博客
09-12 1230
event.stopPropagation();//阻止事件冒泡 ，可阻止父类事件的发生 event.preventDefault();//阻止默认行为 如A标签 转载于:https://www.cnblogs.com/guyuedashu/p/11512050.html...
js阻止事件的默认行为发生的三种方式
JackieDYH的博客
08-09 6398
a标签点击跳转 鼠标右键弹出菜单 滑动滚轮控制滚动条等 这些都是事件的默认行为，某些时候我们不需要这些行为，就需要阻止这些默认行为 阻止事件默认行为 用on方式添加事件 直接在事件处理函数中return false 用addEventListener绑定事件 使用 事件对象.preventDefault() 用attachEvent 绑定事件 使用 事件对象.returnValue = false //=====示...
阻止冒泡事件发生
小猪快跑
12-29 512
问题：今天写代码的过程中，遇到一个新的问题，一个按钮事件已经封装好；需要在调用该按钮的之前先进行数据确认，满足情况下，再执行下面的方法，不然不执行下一个事件。需要点击“续借操作”之前，先进行借阅状态判断若是“借出成功”这可以续借，不然的话不允许续借。解决方案：取原“续借操作”click事件的下一个元素，对此进行新增事件操作，将其他事件进行阻止 1. “续借操作”click事件已封装好，针对的是黑
jquery 阻止事件冒泡
whqwyn的博客
11-11 748
1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的： 重点内容 3.event.preventDefault(); 如果把它放在头部A标签的click事件中，
JS中阻止冒泡事件的三种方法
热门推荐
小小前端
07-17 6万+
冒泡事件：比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。 <div class="box"> <button class="btn">按钮</button> </div> <script type="text/javascript"> $('.btn').click(functio...
js事件-阻止事件冒泡
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
05-28 756
JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之前刺破它。js做法：1 function stopPropagation(e) { 2 e = e ...
阻止事件冒泡的方法
candy_tity的博客
11-17 4799
一、什么是事件冒泡 事件有好多种，最为常用的就是点击事件。在我们想执行点击事件的时候，通常是想让点击某个元素的时候执行某个事件，而冒泡事件就是指在点击这个元素的时候执行了这个事件，而同时它的父元素也执行了这个事件。 如下面的代码： <body> <div> <a href="javascript:;">点击</a> </div> </body> <script t
javascript-阻止默认行为发生
pyhui的技术博客
08-17 549
阻止默认事件发生 阻止a标签的超链接跳转 abc
JS事件对象5--阻止默认事件(鼠标事件)
weixin_40025586的博客
10-09 2736
阻止默认事件的两种方式和兼容方式： &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; //阻止系统默认事件的两种方式： //1.IE：return false; //2.现代浏览器：事件对象.preventDefault(); 阻止默认事件的鼠标按下和右键具体操作： //wrap和a是事先声明好的id样式和标签 var a=document.querySele...
jQuery学习笔记---阻止事件发生及事件发生顺序及表单提交示例应用
time
02-24 336
阻止事件发生2种写法&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &a
js如何阻止事件冒泡
最新发布
08-24
- *2* *3* [JS中阻止冒泡事件的三种方法](https://blog.csdn.net/weixin_43967603/article/details/96307321)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丸子哥哥

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值