JQuery取消事件冒泡

最新推荐文章于 2021-06-26 04:03:16 发布
最新推荐文章于 2021-06-26 04:03:16 发布
阅读量242 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36074157/article/details/70513336
版权

该效果是当你点击bigdiv是弹出big 当你点击smalldiv是弹出small并不会弹出bigdiv

代码如下

[java]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.        
  5.   
  6.     <title>2.html</title>  
  7.       
  8.      <style type="text/css">  
  9.         #bigid {  
  10.             width: 300px;  
  11.             height: 300px;  
  12.             border: 1px solid red;  
  13.         }  
  14.         #smallid {  
  15.             width: 100px;  
  16.             height: 100px;  
  17.             border: 1px solid red;  
  18.         }  
  19.       </style>  
  20.     <script type="text/javascript" src="js/jquery-1.11.1.js"></script>  
  21.     <script type="text/javascript">  
  22.        $(function(){  
  23.          
  24.        $("#bigid").click(function(){  
  25.        alert("big");  
  26.        });  
  27.          
  28.        $("#smallid").click(function(event){  
  29.               alert("small");  
  30.               event=event||window.event;  
  31.               if(event.stopPropagation){  
  32.                  event.stopPropagation();  
  33.                 }else{  
  34.                     event.cancelBubble=true;  
  35.                  }  
  36.          
  37.        });  
  38.          
  39.        });  
  40.   
  41.   
  42.     </script>  
  43.   </head>  
  44.     
  45.   <body>  
  46.   <div id="bigid">big  
  47.   <div id="smallid">small</div></div>  
  48.   </body>  
  49. </html>  


炽烈之心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery取消事件冒泡的三种方法(推荐)
10-22
下面小编就为大家带来一篇jquery取消事件冒泡的三种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
事件冒泡是什么如何用jquery阻止事件冒泡
10-27
4. 验证事件冒泡的JavaScript代码示例：该示例说明如何通过绑定点击事件到不同的div元素，并通过注释或取消注释event.stopPropagation()来控制事件冒泡的行为。 ```javascript $(document).ready(function(){ $('...
jquery取消事件冒泡的三种方法
热门推荐
typ0520的专栏
04-11 3万+
1、通过返回false来取消默认的行为并阻止事件起泡。 jQuery 代码: $("form").bind( 　　"submit", 　　function() { 　　　　return false; 　　 } ); 2、通过使用 preventDefault() 方法只取消默认的行为。 jQuery 代码: $("form").bind(
【转】jquery-取消冒泡
weixin_30824277的博客
07-25 229
转自：http://blog.163.com/css_mm/blog/static/209182176201262665157634/ 1、通过返回false来取消默认的行为并阻止事件起泡。 jQuery 代码: $("form").bind( 　　"submit", 　　function() { 　　　　return false; 　　} ); 2、通过使用 pre...
jQuery取消事件冒泡
qq_36074113的博客
04-23 754
操作：点击所属区域弹出对应事件 注册事件代码： $(function(){ //给大div注册事件 $("#mybigdiv").click(function(){ alert('我是大div'); }); //小div $("#myid").click(function(event){
JQuery_005_取消事件冒泡
03-13 109
<script> //事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发 //元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发 //取消事件冒泡 //jQuery中 return false ...
JQuery中阻止事件冒泡几种方式及其区别介绍
10-26
在JavaScript和jQuery中，事件冒泡是一个常见的概念，它描述了事件从最深的DOM元素开始向上级元素传播的过程。这种机制允许事件处理程序在不同的层次上被触发，但有时我们可能希望阻止事件继续向上层元素传播。在...
jQuery取消特定的click事件
10-22
为了解决这个问题，jQuery提供了一些非常有用的方法来取消特定的事件处理器。 首先，我们来看一下什么是事件冒泡。在HTML中，当一个事件发生在某个元素上时，如果没有地方处理这个事件，则该事件会向上冒泡至父元素...
jQuery如何防止这种冒泡事件发生
10-24
冒泡事件是指在一个DOM元素上发生的事件会向上冒泡到父元素，直到最顶层的根元素。在Web开发中，这通常是指事件在DOM树中传播的机制。冒泡事件允许开发者在较低层级的元素上设置事件监听器，而捕捉在更高层级发生的...
jQuery取消冒泡排序事件
聪明的小明的博客
04-23 982
3.html $(function(){ $("#sid").click(function(){ alert('我是大DIV'); }); $("#bid").click(function(event){ alert('我是小DIV'); event=event||window.event; if (event.stopPropagation) { event.sto
jQuery --- 取消冒泡
weixin_36024620的博客
04-23 543
quxiaomaopao.html #mybigdiv { width: 300px; height: 300px; border: 1px solid red; } #myid { width: 100px; height: 1
jquery取消事件冒泡的三种方法展示
weixin_30840573的博客
01-16 473
jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>阻止冒泡</title> <script src="C:\Users\Administrator\Desktop\jquery-3.1.1...
JQuery 取消时间冒泡
qq_36074064的博客
04-23 442
我们想要实现的效果是：1.鼠标点击大的方框内容时弹出警告窗口（这是大的div）,不包括点击小的div内部部分                                              2.鼠标点击大的方框内容时弹出警告窗口（这是小的div）,但是不弹出警告（这是大的div）， 以下是实现效果 [javascript] view plain copy
android 事件冒泡,jQuery停止事件冒泡
weixin_39581995的博客
05-27 140
event.stopPropagation();在jQuery中提供了stopPropagation()方法来停止事件冒泡。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。在事件的处理中，可以阻止冒泡但是允许默认事件的发生。$(function(){$("#hr_three").click(function(ev...
jquery 事件代理中的 取消冒泡传递
ISaiSai的专栏
12-14 954
jquery 如果不是直接绑定到元素上的事件（通过delegate 绑定的，也无法取得直接元素，）如果想终止事件冒泡，可以在低一级注册代理事件并将其stopPropagation（） 掉<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="./jq
JQuery 关闭事件冒泡
weixin_30315905的博客
08-13 84
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>event_stop_propagation_事件_停止_传播</title> <script type="text/javascri...
html+取消冒泡,深入理解jQuery之防止冒泡事件
weixin_36319281的博客
06-26 146
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。下面是html代码部分：外层div元素内层span元素外层div元素对应的jQuery代码如下：$(function(){// 为span元素绑定click事件$('span').bind("click",function(){var txt = $('#msg').html() + "内层span元素被点击.$('#msg').htm...
阻止事件流冒泡
weixin_30621711的博客
05-04 81
今天又有个朋友问我“点击某个按钮触发某个事件，点击这个按钮之外的任何一个地方触发另一个事件”的功能怎么写。其实有两个方法。一种是在按钮上加个事件，document上加另一个事件，但是在按钮的事件最后，加上阻止事件流冒泡的语句，不冒到document上就行。另一种方法，就是在document上监听事件，然后通过对event.target进行判断，如果当前元素是按钮，执行某个事件，如果不是，执行另一...
jquery实现事件冒泡
最新发布
06-27
jQuery 是一个流行的 JavaScript 库，它简化了 JavaScript 对网页元素的操作，包括事件处理。事件冒泡是一种事件传播机制，在JavaScript中，当一个事件在某个元素上触发时，它会逐级向上穿透DOM树，直到达到文档的根元素。 在 jQuery 中，可以通过 `.on()` 方法来绑定事件并利用事件冒泡。例如，如果你想在点击一个按钮时也触发其父级元素的事件，可以这样做： ```javascript // 绑定点击事件到按钮 $("#myButton").on("click", function(event) { // 处理按钮点击事件 console.log("Button clicked"); }); // 由于事件冒泡，这个点击事件也会触发父元素的事件处理 // 如果父元素也绑定了 "click" 事件，这里会执行 $("#parentElement").on("click", function(event) { // 处理父元素点击事件 console.log("Parent element clicked"); }); ``` 如果你想利用事件冒泡取消某个元素的默认行为，可以使用 `event.stopPropagation()`；如果想要阻止事件冒泡到父元素，则可以使用 `event.stopImmediatePropagation()`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值