阻止冒泡兼容写法

最新推荐文章于 2021-09-08 15:37:25 发布
最新推荐文章于 2021-09-08 15:37:25 发布
阅读量1.1k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： w3c 冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Evan_QB/article/details/77915526

w3c的方法是：（火狐、谷歌、IE11）

  event.stopPropagation()

IE10以下则是使用：event.cancelBubble =true

兼容代码如下：

var event = event || window.event;

 if(event && event.stopPropagation){

            event.stopPropagation();

 }else{

            event.cancelBubble = true;

 }



兼容各大浏览器的JavaScript阻止事件冒泡代码
10-23
本文给大家分享的是一段兼容各大浏览器的JavaScript阻止事件冒泡代码，虽然因为时间问题没有深入研究，但是还是相当不错的，这里推荐给大家
js阻止冒泡和默认事件（默认行为）详解
10-21
而按钮点击事件的处理函数返回`false`，既可以阻止冒泡也可以阻止默认行为，这是一种简便写法，仅适用于支持此行为的浏览器。 综上所述，JavaScript中的阻止冒泡和阻止默认行为是非常重要的技术点，它们在处理复杂...
阻止事件冒泡兼容性写法
weixin_42187676的博客
10-03 946
阻止事件冒泡的兼容性写法
weixin_45677987的博客
09-08 551
1: 阻止事件冒泡的兼容性写法: 阻止冒泡: 1: dom 推荐stopPropagation() 阻止捕获和冒泡阶段中当前时间的进一步传播。 但是他不能防止任何默认行为的发生; 例如: 对链接的点击仍会被处理。 不适用于ie 6, 7, 8 2: cancleBubble: Event.cancelBubble 属性是: Event.stopPropagation 的一个曾用名。 在从事处理程序返回之前将其设置为true, 可以阻止事件传播。 适用于ie 6, 7, 8 &.
js阻止冒泡的兼容写法
huang_xiao_wei的博客
02-02 442
js阻止冒泡的兼容写法
阻止冒泡的兼容写法
qjyue77的专栏
06-22 369
$("#demo").on("click",function(e){ if (e && e.stopPropagation){ e.stopPropagation(); }else{ window.event.cancelBubble = true; } });
js阻止冒泡及jquery阻止事件冒泡示例介绍
10-26
标题中提到的“js阻止冒泡及jquery阻止事件冒泡示例介绍”涉及JavaScript和JQuery两种技术在事件处理中阻止事件冒泡的概念。冒泡是指当一个元素上触发了某个事件（如点击），这个事件不仅会在该元素上进行处理，还会...
javascript 处理事件绑定的一些兼容写法
12-09
以下是一些处理事件绑定的兼容写法： 1. **基本事件绑定函数**： ```javascript var addEvent = function(obj, type, fn) { if (obj.addEventListener) obj.addEventListener(type, fn, false); else if (obj....
JS事件添加和移出的兼容写法示例
10-22
除了添加和移除事件的兼容写法外，上述代码还提供了几个辅助方法，比如获取事件对象`getEvent`，阻止事件默认行为`preventDefault`，停止事件冒泡`stopPropagation`等。这些方法也是为了兼容不同的浏览器环境而设计...
常用原生JS兼容性写法汇总
10-22
以下就详细汇总了这些常用原生JS的兼容性写法。 ### 一、添加事件监听方法 在DOM2级事件模型中，添加事件监听的方法是`addEventListener`，但在IE8及更早版本的浏览器中，需要使用`attachEvent`方法来添加事件监听...
阻止冒泡的兼容性写法，以及阻止浏览器默认事件
董无敌啊
03-17 840
事件冒泡简介： 事件触发时由里到外  冒泡 IE678：div > body > html > document 其他浏览器： div > body > html > document > window 不冒泡blur、focus load、unload 阻止冒泡 stopPropagation(); 阻止冒泡的兼容性写法： IE678：event.cancelBubble = true; 正常
事件冒泡的概念及阻止事件冒泡-兼容性写法
小傻子的博客
11-11 1488
36事件冒泡和捕获-兼容性写法 一、什么是事件冒泡 一条鱼往上吐泡泡，这个泡泡就是事件，一直往上冒的过程中去把它经过的所有元素，只要这个元素身上有相同事件，就会去执行该元素的该事件，没有相同事件就不会去执行 二、冒泡特点 1、冒泡看的是代码层级，从里往外冒泡 2、拥有相同类型事件的元素才会被执行 3.不同事件就是不同泡泡 三、阻止事件冒泡 并不是所有事件都需要事件冒泡，我们需要让事件执行完自身的该...
js中阻止冒泡，阻止默认行为的兼容性写法
yinge0508的博客
07-13 349
// 阻止事件冒泡的 跨浏览器兼容方案 function stopBubble(e){ if(e.stopPropagation){ e.stopPropagation();// W3C }else{ e.cancelBubble = true; // IE } } // 阻止超链接的默认行为 function preventDefau...
js阻止冒泡，兼容写法。
天下大师傅
05-03 1810
有几次遇到a链接里面包含click点击方法，这时候会触发click事件，还会触发a链接跳转。这时候就需要阻止冒泡了。添加event.stopPropagation();就可以了。在chrome上可以使用。本以为万事大吉了，没想到火狐不支持event事件。既然问题来了，就得解决。所以搜遍了百度，得到了以下的代码。//兼容火狐 获取event方法 function getEvent(){ if...
阻止冒泡和阻止默认事件的兼容性写法
蘑菇炸了
12-07 3063
阻止冒泡和阻止浏览器默认行为的兼容性写法
关于阻止冒泡的兼容性写法以及判断目标点的兼容性写法
Apologize
04-04 669
关于一些常用的兼容性写法， 以后慢慢往这里加哈！ 1. 阻止事件冒泡的兼容性写法： 2  判断事件的当前对象的兼容性写法： 3 . 获得用户选择内容 ：
阻止事件冒泡以及兼容性写法
cccccl的博客
03-05 765
阻止事件冒泡以及兼容性写法 阻止冒泡 ： 1、dom 推荐 stopPropagation()阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生； 例如，对链接的点击仍会被处理。 不适用于 ie 6 7 8 . 2、cancelBubble：Event.cancelBubble 属性是 Event.stopPropagation()的一个曾用名。在从事件处理程序返回之前将其值设置为true可阻止事件的传播。 适用于 ie 6 7 8 <body> <di
javascript 阻止事件冒泡 的兼容写法
luckydog
12-23 220
Cookie 用于存储 web 页面的用户信息。 什么是 Cookie？ Cookie 是一些数据, 存储于你电脑上的文本文件中。cookie在浏览器和服务器之间来回传递。 Cookie有个数和大小的限制，大小一般是4k， 由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上...
vue 组件阻止href冒泡事件
最新发布
04-03
### Vue 中阻止 a 标签 href 的冒泡事件方法 在 Vue 组件中，可以通过多种方式来阻止 `a` 标签的 `href` 属性所引发的默认跳转行为以及其冒泡事件。以下是几种常见的实现方法： #### 方法一：使用 Vue 的 `.prevent` 和 `.stop` 事件修饰符 Vue 提供了内置的事件修饰符用于处理常见场景下的事件控制需求。通过组合使用 `.prevent` 和 `.stop` 可以分别阻止默认行为和冒泡行为。 ```vue <template> <div> <!-- 使用 .prevent 阻止默认跳转 --> <a @click.prevent="handleClick">点击不会跳转</a> <!-- 同时阻止默认行为和冒泡 --> <a @click.stop.prevent="handleClick">点击既不跳转也不冒泡</a> </div> </template> <script> export default { methods: { handleClick(event) { console.log('链接被点击', event); } } }; </script> ``` 上述代码展示了如何利用 Vue 的事件修饰符来管理 `a` 标签的行为[^1]。 --- #### 方法二：直接调用原生 JavaScript API 如果需要更灵活的方式，则可以在事件处理器内部手动调用浏览器提供的标准方法 `event.preventDefault()` 和 `event.stopPropagation()` 来达到相同效果。 ```vue <template> <div> <a href="https://www.example.com" @click="handleCustomEvent($event)">自定义逻辑</a> </div> </template> <script> export default { methods: { handleCustomEvent(event) { // 手动阻止默认行为 event.preventDefault(); // 如果有父级监听器，可以阻止冒泡 event.stopPropagation(); console.log('执行了自定义逻辑'); } } }; </script> ``` 这种方法允许开发者完全掌控事件流并实施复杂的业务逻辑。 --- #### 方法三：兼容性写法 (针对旧版浏览器) 对于某些特殊情况下可能运行于较老版本环境中的项目来说，还可以采用如下形式确保最大范围内的支持度： ```html <a href="javascript:void(0);" onclick="return false;">无操作链接</a> <!-- 或者 --> <a href="#" onclick="window.event ? window.event.cancelBubble=true : event.stopPropagation(); return false;">停止传播</a> ``` 此片段结合了 HTML 属性与脚本语句共同作用从而达成目标[^2]。 --- ### 总结 以上三种方案各有优劣之处，在实际应用过程中可以根据具体需求选取最合适的那一种或者混合运用它们完成任务。推荐优先考虑基于框架特性的解决方案即第一种做法因为它更加简洁明了同时也充分利用到了 Vue 自身的优势特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值