jq冒泡事件解决方案的区别

最新推荐文章于 2024-04-22 15:31:17 发布
最新推荐文章于 2024-04-22 15:31:17 发布
阅读量496 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xudakaka/article/details/44683231
版权

方法一：注：event.stopPropagation(); 记得参数加上event

<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .box1 {  
    border: green 40px solid;  
    width: 300px;  
    height: 300px;  
    margin: auto;  
}  
 
.box2 {  
    border: yellow 40px solid;  
    width: 220px;  
    height: 220px;  
    margin: auto;  
}  
 
span {  
    position: relative;  
    left: 50px;  
    top: 50px;  
    background-color:red;
}  
  </style>
  <script  src="jquery-1.10.1.min.js"></script>
   <script>
        $(function(){
                $('#span').on('click',function(event){
                    alert('span');
                    event.stopPropagation();
                })
                $('#box2').on('click',function(event){
                    alert('box2');
                    event.stopPropagation();
                })
                    $('#box1').on('click',function(event){
                    alert('box1');
                    event.stopPropagation();
                })
        })
  </script>
 </head>
 <body>
     <div id="box1" class="box1">  
        <div id="box2" class="box2">  
            <span id="span">This is a span.</span>  
        </div>  
    </div>
 </body>
</html>

方法二：利用return false;

但是这两种也是有区别的

return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

徐小珂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jq事件冒泡
yangyixue123的博客
07-19 3392
事件冒泡：当一个事件发生时，该事件总共有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。 当事件发生时，这个事件就要开始传播，从而能够达到处理这个事件的代码中，（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。 当事件在传播的过程中，找到了一个能够处理它的函数，此时可以说这个函数捕捉到了这个事件。那一个函数是如何捕捉一
jquery 触发a链接点击事件解决方案
10-27
这样做可能会绕过jQuery的一些特性，如事件冒泡和事件委托，因此在某些情况下可能无法正常工作。例如，如果事件处理函数是在jQuery的`.on()`方法中添加的，那么通过这种方式可能不会触发这些函数。 另外，注意到在...
jQuery解决事件冒泡
weixin_46429290的博客
11-30 124
jQuery解决事件冒泡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery事件自动触发</title> <script src="js/jquery-1.12.4.js"></script> <style> *{ margin: 0; padding: 0; } .f
JQ 事件冒泡
一直专注于互联网
04-23 181
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;冒泡&lt;/title&gt; &lt;style type="text/css"&gt; * { marg
jQuery 事件冒泡
柯晓楠
11-28 3000
jQuery 事件冒泡解释 官方解释： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 草根解释： 当我们在某一个元素上去触发一个事件时，比如鼠标移动事件，该元素所绑定的事件也会影响到其子元素，或者是在
jQuery事件冒泡机制与解决
爱代码也爱生活
07-09 4315
（1）什么是事件起泡  首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。  当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的
jquery动态添加元素事件失效问题解决方法
10-25
jQuery提供了多种解决方案来处理动态添加元素的事件绑定问题。其中，`live()`方法曾经是一个常用的解决办法，它允许在页面上已经存在或未来可能出现的元素上绑定事件。然而，`live()`自jQuery 1.7版本后逐渐被废弃，...
jquery mobile事件多次绑定示例代码
12-09
### 解决方案 为了解决多次绑定的问题，有几种可能的方法： 1. **解除绑定**：在每次`pageinit`事件触发前，先解除之前绑定的事件。这可以通过`$.unbind()`或`off()`方法实现。但是，这种方法需要你清楚地知道哪些...
jQuery实现的简单排序功能示例【冒泡排序】
11-26
冒泡排序的时间复杂度为O(n^2)，对于小规模数据或者部分有序的数据，它是一个可行的解决方案。但在处理大规模数据时，效率较低，通常我们会选择更高效的排序算法如快速排序、归并排序等。 总的来说，这个示例展示了...
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
11-21
首先，尝试了一种可能的解决方案，即使用jQuery的`delegate()`方法。`$.delegate()`允许我们为未来可能出现的元素指定事件处理器。遗憾的是，由于jQuery版本过高（1.9及以上），这个方法已被弃用，因此未能解决问题...
jQuery事件冒泡
li840793179的博客
03-09 2371
开始前，我就想问几个问题。 什么是事件冒泡 如何阻止事件冒泡 先看代码图、设置两个盒子，用一个盒子包着另一个盒子，外边的盒子我给它红色、里边的盒子我给它蓝色，用jQuery赋予两个盒子点击事件 当你点击外边的盒子时，提示框会弹出“fanther”如下图 当你点击里边的盒子时。提示框会依次弹出“son”和“fanther”。 如果子元素和父元素同时注册了点击事件或其他事件，在子元素响应事件的时候父元素也会跟着响应事件，这就是事件的冒泡，事件冒泡就是事...
jQuery基础学习（属性操作、循环、事件冒泡委托、元素节点操作、滚轮事件、函数节流、json、ajax、jsonp与本地存储）
最新发布
我的个人博客
04-22 1025
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。其次可以让新加入的子元素也可以拥有相同的操作。
jQuery 事件冒泡及解决
m0_56557880的博客
10-08 531
在jQuery中点击触发事件的时候，有时候会导致其他事件一同触发，其他事件一般为该盒子的父元素的事件：例如创建一个div里面包含一个div： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
jquery的冒泡
qq_42980244的博客
05-30 228
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 我们在平时的开发过程中，肯定会遇到在一个元素包裹一个元素的情况，但是呢，在这两个元素上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。 如下，如果给span添加了点击事件，也给div添加了点击事件，span在div中，span触发点击事件，外层包裹的div也会触发点击事件。此时我们就要用到阻止冒泡。 <div> <span>a
jQuery事件冒泡处理
青椒盖饭的博客
01-15 3831
在大部分的情况下,往往会针对于一个ID组件绑定事件,基本不会有问题,但在jQuery里面也会存在有事件的冒泡处理. 观察冒泡处理 &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;jQuery的事件绑定处理&lt;/title&gt; &lt;script type="text/javascri
JQuery事件冒泡机制与解决
Inuyasha1121的专栏
05-20 2482
一、什么是事件冒泡？        当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。 当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如
jq阻止冒泡事件
lily2016n的博客
04-26 1048
阻止冒泡事件 **方式一：event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; $("#div1").mousedown(function(event){ return false;
jq阻止事件冒泡和默认行为的方法
lifewinner1992的博客
05-12 6644
$("#btn").click(function(event){    event.stopPropagation(); //1.停止事件冒泡，但是不会阻止默认行为    return false; // 2.阻止事件冒泡，也阻止了默认行为    event.preventDefault(); // 3.阻止默认行为，不阻止事件冒泡});...
JQ鼠标事件
06-01
JQ（jQuery）是一种广泛应用于网页开发中的JavaScript库，它提供了许多方便的操作方法和函数，其中也包括鼠标事件的处理。 以下是几种常见的JQ鼠标事件： 1. click()：当鼠标单击时触发； 2. dblclick()：当鼠标双击时触发； 3. mouseenter()：当鼠标移到元素上时触发； 4. mouseleave()：当鼠标移出元素时触发； 5. mousedown()：当鼠标按钮被按下时触发； 6. mouseup()：当鼠标按钮被松开时触发； 7. mousemove()：当鼠标在元素内移动时触发； 8. hover()：当鼠标移入或移出元素时触发。 这些事件可以通过JQ的选择器和函数进行绑定和处理。例如，可以使用以下代码来绑定一个点击事件： ```javascript $("#myButton").click(function(){ // 点击事件的处理代码 }); ``` 其中，`#myButton`是一个元素的ID选择器，表示绑定在该元素上的点击事件。当该元素被点击时，事件处理函数会被执行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值