阻止事件冒泡及默认行为

最新推荐文章于 2022-04-21 08:55:58 发布
最新推荐文章于 2022-04-21 08:55:58 发布
阅读量190 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41348029/article/details/81234642
版权

为使点击当前元素，只执行当前所点击元素的特定操作，可以使用阻止冒泡或者阻止默认行为。

1、阻止默认行为。preventDefault()

 

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>
        <div id="div2" style="width:300px; height:300px; background:palevioletred">
            <div id="div1" style="width:100px; height:100px; background:palegreen">
                <a id="aaa" href="http://www.baidu.com">aaa</a>
            </div>
        </div>

        <script>
            window.onload = function() {
                var oDiv1 = document.getElementById('div1');
                var oA = document.getElementById('aaa');

                oA.onclick = function(ev) {
                    var oEvent = ev || event;
                    alert("this is div1");
                    //js阻止链接默认行为，没有停止冒泡
                    oEvent.preventDefault(); 
                };
                oDiv1.οnclick=function(){
                    alert("this is div2");
                }
                
            }
        </script>
    </body>

</html>

2、阻止冒泡行为，不阻止默认行为。① cancelBubble ② stopPropagation()

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>
        <div id="div2" style="width:300px; height:300px; background:palevioletred">
            <div id="div1" style="width:100px; height:100px; background:palegreen">
                <a id="aaa" href="http://www.baidu.com">aaa</a>
            </div>
        </div>

        <script>
            window.onload = function() {
                var oDiv1 = document.getElementById('div1');
                var oDiv2 = document.getElementById('div2');

                oDiv1.onclick = function(ev) {
                    var oEvent = ev || event;
                    alert("this is div1");

                    //js阻止事件冒泡,不阻止默认行为。
                    oEvent.cancelBubble = true;//支持IE，不符合W3C标准。
                    oEvent.stopPropagation();//不支持IE，支持火狐，符合W3C标准。
                }

                oDiv2.onclick = function(ev) {
                    var oEvent = ev || event;
                    alert("this is div2");
                }
            }
        </script>
    </body>

</html>

3、即阻止默认行为，也阻止冒泡行为 。return false

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>
        <div id="div2" style="width:300px; height:300px; background:palevioletred">
            <div id="div1" style="width:100px; height:100px; background:palegreen">
                <a id="aaa" href="http://www.baidu.com">aaa</a>
            </div>
        </div>

        <script>
            window.onload = function() {
                var oDiv1 = document.getElementById('div1');
                var oDiv2 = document.getElementById('div2');

                oDiv1.onclick = function(ev) {
                    var oEvent = ev || event;
                    alert("this is div1");

                    //js阻止事件冒泡,也阻止默认行为。return false 阻止当前点击对象事件冒泡
                    return false;
                };
                document.onclick = function(ev) {
                    oDiv1.style.color="red";
                };
            }
        </script>
    </body>

</html>

 

qq_41348029
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
柱状图echarts图表及点击事件
12-11
echarts柱状图，有点击事件，可以点到对应的事件，自己可以加上自己想要的功能。
阻止事件冒泡
weixin_34334744的博客
08-21 59
1、通过返回false来取消默认的行为并阻止事件起泡。 jQuery 代码: $("form").bind( 　　"submit", 　　function() { 　　　　return false; 　　 } ); 2、通过使用 preventDefault() 方法只取消默认的行为。 jQuery 代码: $("form"...
Echarts点击事件（阻止冒泡）
weixin_38190600的博客
10-21 4963
var myCharts=self.$echarts.init(document.getElementById('myChart')); // 跳转前先解绑，防止重复跳转 myCharts.off('click'); myCharts.on('click',function(params){});
阻止冒泡
qq_23260639的博客
06-19 168
if ( e.stopPropagation ){ //标准浏览器 e.stopPropagation(); }else{ //兼容IE window.event.cancelBubble = true; }
js阻止冒泡和默认事件（默认行为）详解
10-21
主要为大家详细介绍了js阻止冒泡和默认事件，即默认行为,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript阻止事件冒泡和浏览器的默认行为
11-26
JavaScript中的事件处理是Web开发中的重要组成部分，它允许我们对用户与页面的交互做出响应。在JavaScript中，事件...在编写交互式网页时，了解如何阻止事件冒泡和浏览器的默认行为对于创建定制的用户体验至关重要。
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
12-12
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e....
jQuery中事件的冒泡和默认行为
01-20
事件冒泡和默认行为是理解JavaScript事件模型的关键概念。本文将详细探讨这两个概念以及如何在jQuery中控制它们。 **事件的冒泡** 事件冒泡是指当一个事件（如点击）在DOM（文档对象模型）中的某个元素上触发时，该...
angular ngClick阻止冒泡使用默认行为的方法
11-29
本文实例讲述了angular ngClick阻止冒泡使用默认行为的方法。分享给大家供大家参考，具体如下： 这其实是一个很简单的问题，如果你认真查看过Angular官方的API文档，本来不想记录的。但是这个问题不止一次的被人问起...
echarts图表点击事件
05-23
echarts的点击事件，从网上参考来的 .................................................................................................................
如何阻止事件冒泡和默认行为？
dedong4563的博客
12-17 87
1.背景介绍浏览器的事件发生顺序 浏览器的事件发生顺序分为事件冒泡与事件捕获，分别由微软和网景公司提出。 事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。 因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> htm...
阻止事件冒泡的三种手段
weixin_30856725的博客
01-10 148
阻止事件冒泡的三种手段 1、return false：可以阻止默认事件和冒泡事件 2、event.stopPropagation/IE下event.cancelBubble = true;：可以阻止冒泡事件但是允许默认事件 3、event.preventDefault();/IE下event.returnValue = false：可以阻止默认事件但是允许冒泡事件 1 <!D...
阻止事件冒泡的3种方法
weixin_30292843的博客
12-26 655
实现代码： $("#three").click(function(event) { event.stopPropagation(); }); a.写入event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为 b.写入return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为 c.写入ev...
JS事件（补充）
lz010123的博客
04-21 263
JS事件（补充） 事件冒泡 在触发事件时候 会一层一层向上冒泡 （他同时会触发父类的事件） 阻止事件冒泡 意思就是阻止事件的向上传递 在点击div里面的按钮时 会触发div的点击事件 事件冒上去了 <head> <style> div{ width: 300px; height: 300px; background-color: red; } </style&
Echarts柱状图点击事件（阻止冒泡）
qq_43243541的博客
06-20 5101
Echarts柱状图点击事件（阻止冒泡） 上面是我的柱状图转换饼状图，单击每个柱形图可以切换查看饼图！上次的文章已经说明了饼图的写法，柱状图也很简单可以参考echarts的官网，这里，我具体就是出现了冒泡事件，也就是说在我的柱状图上面可以看到有查询条件，当我点击查询事件得到结果值的时候就会出现冒泡事件解决方式很简单，上代码 // 跳转前先解绑，防止重复跳转 chartInstance.off(...
js阻止事件冒泡的两种方法
热门推荐
阿哲的博客
01-18 4万+
一、冒泡事件简介 当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。 方法一：event.stopPropagation( ); 例如：     段落文本内容         type="button" value="点击" />     html代码： // 为所有div元素绑定click事件 $("div")
阻止事件冒泡方法
weixin_57157220的博客
07-09 1万+
阻止事件冒泡方法 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不止事件向document上蔓延，但是默认事件任然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法时，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素 3.return false; 这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件，不仅阻止了事件往上冒泡，而且阻止了事件本身
阻止事件冒泡或捕获阶段
zahirah22的博客
04-24 533
  默认情况下，多个事件处理函数会按照DOM事件流模型中的顺序执行。如果子元素上发生某个事件，不需要执行父元素上注册的事件处理函数，那么我们可以停止捕获和冒泡，避免没有意义的函数调用。前面提到的5种事件绑定方式，都可以实现阻止事件的传播。由于第5种方式，是最推荐的做法。所以我们基于第5种方式，看看如何阻止事件的传播行为。IE8以及以前可以通过 window.event.cancelBubble=t...
vue同时添加阻止冒泡和阻止默认行为
最新发布
08-21
在Vue中同时添加阻止冒泡和阻止默认行为的方法是使用`@click.stop.prevent`指令。`@click.stop`用于阻止事件冒泡，而`@click.prevent`用于阻止默认行为。通过将这两个指令同时应用在元素上，可以实现同时阻止事件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值