js点击事件禁止冒泡

      $(".car-style").click(function(){
      	$(".operate-mask-outer").show();
        // 点击黄色的禁停站,弹出框显示
      });
      $("#operateMask").click(function(){
        $(".operate-mask-outer").hide();
        // 点击灰色边缘的地方,弹出框消失
      })
      $(".stopover-station").click(function(event){
        $(".operate-mask-outer").show();
        event.stopPropagation();
        // 阻止冒泡的关键代码
        // 点击弹出框内部,弹出框不消失
      })

 

想要阻止事件冒泡,在方法里面加这个代码就可以了 event.stopPropagation(); 

需要注意的是:event是和方法里面的参数一样的

 

### 阻止事件冒泡的实现方法 在 JavaScript 中,事件冒泡是指事件从目标元素向上传播至其祖先元素的过程。为了控制这种行为,可以使用多种方法来阻止事件冒泡。 #### 1. 使用 `stopPropagation` 方法 `stopPropagation` 是事件对象的一个方法,用于阻止事件从当前元素向上传播。此方法在现代浏览器中广泛支持。 ```javascript document.querySelector('.son-box').addEventListener('click', function(e) { e.stopPropagation(); alert("子盒子"); }); ``` 这种方法适用于原生 JavaScript 编写的代码,确保事件不会冒泡到父元素 [^2]。 #### 2. 使用 `cancelBubble` 属性 对于旧版的 Internet Explorer 浏览器,可以使用 `cancelBubble` 属性来阻止事件冒泡。 ```javascript document.querySelector('.son-box').addEventListener('click', function(e) { e.cancelBubble = true; alert("子盒子"); }); ``` 这种方法是针对不支持 `stopPropagation` 的浏览器的一种替代方案 [^4]。 #### 3. 使用 jQuery 的 `return false` 在使用 jQuery 进行事件处理时,可以通过 `return false` 来同时阻止事件冒泡和默认行为。 ```javascript $('.btn').click(function(event) { alert('按钮被点击了'); return false; }); ``` 此方法简洁明了,适用于 jQuery 环境下的开发 [^3]。 #### 4. Vue.js 中的事件修饰符 在 Vue.js 框架中,可以使用事件修饰符来简化阻止事件冒泡的操作。例如,使用 `.stop` 修饰符来阻止事件冒泡。 ```html <div class="father-box" @click="clickFatherBox">我是父盒子 <div class="son-box" @click.stop="clickSonBox">我是子盒子</div> </div> ``` 此外,还可以使用 `.self` 修饰符来确保事件仅在绑定元素自身触发时才执行。 ```html <div class="father-box" @click.self="clickFatherBox">我是父盒子 <div class="son-box" @click="clickSonBox">我是子盒子</div> </div> ``` 这些修饰符简化了在 Vue.js 应用程序中的事件处理逻辑 [^5]。 ### 总结 以上方法提供了在不同场景下阻止事件冒泡的方式,无论是使用原生 JavaScript、jQuery 还是 Vue.js 框架,都可以找到合适的解决方案来控制事件传播。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值