js 点击事件 阻止冒泡

最新推荐文章于 2024-04-11 10:00:30 发布
最新推荐文章于 2024-04-11 10:00:30 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： javascript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gt_1992/article/details/105530642
版权 
<!DOCTYPE html>  
<html lang="zh-CN"> 
<head> 
<meta charset="utf-8"> 
<title>阻止冒泡</title> 
<meta name="keywords" content="阻止冒泡" /> 
<meta name="description" content="阻止冒泡" /> 
</head> 
<body> 
    <div onclick="parentClick(this);">
        <div onclick="childClick(this);"></div>
    </div>
    <script>
        function parentClick(obj){
            alert('父级元素点击事件');
        }
        function childClick(){
            
            // 阻止冒泡：点击子级时，不触发父级元素的点击事件
            var e = getEvent();
            if (window.event) {
                e.cancelBubble = true;
            }else if(e.preventDefault){
                e.stopPropagation();//阻止冒泡
            }         

            alert('子级元素点击事件');
        }
        //获取event(兼容火狐)
        function getEvent(){
            if(window.event){return window.event;}
            var func = getEvent.caller;
            while(func != null){
                var arg0 = func.arguments[0];
                if(arg0){
                    if((arg0.constructor == Event || arg0.constructor == MouseEvent
                            || arg0.constructor == KeyboardEvent)
                        || (typeof(arg0) == "object" && arg0.preventDefault
                            && arg0.stopPropagation)){
                        return arg0;
                    }
                }
                func = func.caller;
            }
            return null;
        }
    </script>
</body> 
</html>
gt_1992
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js禁止事件冒泡
Utopian_x的博客
09-25 543
首先了解冒泡是什么？ 事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（其实就是事件的向上传导，如多个元素嵌套，里面的元素触发了事件，外面元素也会自动触发该事件。） <body> <div id="box1">我是box1 <p id="box2">我是box2 <span id="box3">我是box3</span> ...
如何在js中解决阻止事件冒泡问题？
Code_King006的博客
04-06 1649
内联onclick事件虽然没有显式的传入event对象，但是在click事件中还是可以使用event对象的，不过这里有个细节需要注意，那就是event总是保存着最后发生的那个事件对象的信息。事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne。会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度。运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层。---->然后再链接到百度.
JS——事件冒泡与阻止事件冒泡
Bonsoir777的博客
08-25 3470
本文主要介绍JS中有关事件流的相关知识点
js 事件阻止冒泡（div中两个点击事件）
最新发布
Missbelover的博客
04-11 140
js 事件阻止冒泡（div中两个点击事件）
取消html中onclick的事件冒泡
glsanguo的博客
07-16 1867
event.cancelBubble=true;
js阻止冒泡，兼容写法。
天下大师傅
05-03 1727
有几次遇到a链接里面包含click点击方法，这时候会触发click事件，还会触发a链接跳转。这时候就需要阻止冒泡了。添加event.stopPropagation();就可以了。在chrome上可以使用。本以为万事大吉了，没想到火狐不支持event事件。既然问题来了，就得解决。所以搜遍了百度，得到了以下的代码。//兼容火狐 获取event方法 function getEvent(){ if...
JavaScript捕捉事件和阻止冒泡事件实例分析
12-03
本文通过实例分析了如何在JavaScript中捕捉事件以及如何阻止冒泡事件。 事件冒泡是指事件在DOM（文档对象模型）树中从最具体的节点（子节点）向上级节点（父节点）传播的过程。当一个元素发生事件，如点击（onclick...
js事件冒泡及其阻止方法
01-08
例如，在更新后的代码中，当点击`.childOne`时，通过调用`event.stopPropagation()`，阻止了事件冒泡到`.par`，从而避免了父元素事件的触发。 在处理多个相似的子元素事件时，事件委托是一种高效的方法。事件可以只...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
总结来说，当遇到Vue中阻止冒泡失效的问题时，我们需要确保事件处理器定义在Vue实例的`methods`中，并使用事件修饰符`.stop`来阻止事件冒泡。同时，Vue提供的其他事件修饰符如`.prevent`, `.capture`, `.self` 和 `....
浅谈javascript事件取消和阻止冒泡
10-24
总结来说，JavaScript的事件取消和阻止冒泡是控制页面交互行为的关键工具。通过使用`event.preventDefault()`、`event.stopPropagation()`以及IE特有的方法，我们可以精细地管理事件的行为，确保它们按照我们的预期...
zepto.js中tap事件阻止冒泡的实现方法
01-19
本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法。分享给大家供大家参考。具体如下： 最近在弄一个手机版的网站，本来想用jQuery Mobile，但文件太大了，所以用了zepto.js 由于移动网页中使用click事件会有延迟...
阻止事件冒泡的方法
qq_43294510的博客
03-02 644
阻止事件冒泡的方法 首先看看事件冒泡是什么？ 事件冒泡代码结构上嵌套，在直系关系中；同一个事件绑定多个元素（子元素，父元素…都绑定该事件），从子元素到父元素依次触发事件。 代码很简单，就是三个父子关系的div,然后分别加了点击事件。阻止冒泡。 css样式代码 &lt;style&gt; .wrap { width: 400px; height: 400px; background: red; } ...
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
weixin_36264801的博客
06-07 4193
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ，有需要的朋友可以参考一下一、冒泡事件简介当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。方法一：event.stopPropagation( );例如：段落文本内容html代码：// 为所有p元素绑定click事件$("p").click( function(event){alert("p-click"...
js事件冒泡与阻止冒泡
u014414110的博客
03-20 286
<div id="dv"> <div id="dv1"> <div id="dv2"></div> </div> </div> </body> <script> function mm(id){ return document.getElementByI...
js阻止事件冒泡的方法
ld395353765的博客
12-06 519
一、冒泡事件简介 当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。 方法一：event.stopPropagation( ); 例如： &lt;div&gt;     &lt;p&gt;段落文本内容         &lt;input type="button" value="点击" /&gt;     &lt;/p&gt; &lt;/div&g
angularjs ng-click 阻止事件冒泡
github_38469481的博客
05-25 1887
废话不多说具体场景如下： 点击深色方形区域选中改条数据，点击详情按钮显示该数据对应的单据详情，但是问题出在点击详情的时候不仅展示了单据详情，同时执行了选中当前数据的操作（点击事件冒泡到了父元素上），所以解决该问题在于要阻止事件冒泡。 于是去查看关于ng-click的文档，官方文档这样描述： 可见事件对象是$event。 所以我们可以在事件触发的时候传入$event 然后做阻止事件
JS_js阻止事件冒泡的方法
小歪博客
04-26 1534
阻止方法有三种： 1、event.stopPropagation(); document.querySelector("#login").addEventListener("click",(event)=>{ event.stopPropagation(); }) 2、return false; document.querySelector("#login").addEventListener("click",(event)=>{ return false; }) 3、event.pre
用JS阻止事件冒泡
清秋伊叶的专栏
07-14 7412
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 可以用JS来阻止js事件冒泡。因为浏览器的差异IE和FF的JS写法有点不一样。IE用c
JQ--阻止点击事件冒泡
xiao白的博客
11-13 1251
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>阻止点击事件冒泡</title> <style> .father { width: 400px;.
javascript阻止事件冒泡
06-06
在JavaScript中，阻止事件冒泡的通用方法是使用event.stopPropagation()方法。当在一个DOM元素上触发某个事件时，浏览器会将此事件对象event作为函数的参数传递到事件监听器函数中。在事件监听器中，通过调用event....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值