首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()

事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。...事件冒泡的示例 编写三个嵌套的div,同时绑定click事件,来演示事件冒泡。 ?...设置了阻止冒泡传递之后,那么click()事件就不会传递到father和grandfather的事件,所以只有一个alert()弹出。 完整事件冒泡示例代码 <script type="text/javascript" src="<em>jquery</em>-3.4.0....合并阻止操作 实际开发<em>中</em>,一般把阻止<em>冒泡</em>和阻止默认行为合并起来写,合并写法可以用 // event.stopPropagation(); // event.preventDefault(); // 合并写法

6K41
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jquery - 页面弹框 - 阻止事件冒泡示例

    解决#btn的事件冒泡,使用return false; ? 在阻止了#btn按钮的click()事件冒泡到$(document)之后,那么弹框就可以正常显示了。...这个思路不涉及事件冒泡的阻止,但是属于同一个click()方法的阻止,因为点击$(document)的click()事件应该不会冒泡到它下面的元素.pop,不过可以在这里验证一下。...执行完毕了alert()的事件之后,就继续冒泡将click()方法至下而上得冒泡至$(document),导致$(document)执行fadeOut()。...在这个验证的过程,更加确认了刚才在.pop使用return false;的确是用来阻止click()的冒泡至$(document)的。...写到这里基本已经演示完了关于事件冒泡的弹框示例了。 完整代码 <!

    3.3K10

    jQuery:详解jQuery事件(二)

    上一篇讲到jQuery事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件的合成事件事件冒泡事件移除等内容。   ...接上篇jQuery:详解jQuery事件(一)   3、合成事件   jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法...就上面的简单描述,已经可以看出问题所在了,那就是会出现意想不到的click事件,所以需要对事件作用范围进行限制。   jQuery有三种办法可以解决事件冒泡导致的问题。...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。  停止事件冒泡:停止事件冒泡可以阻止事件其他对象的事件处理函数被执行。...在jQuery中提供了stopPropagation()方法来停止事件冒泡

    2.2K30

    FLEXFLASH-冒泡事件与非冒泡事件

    1){                     Event.EventData = "内部按钮";                     btn1.dispatchEvent(Event);//将事件分派到事件...else{                     Event.EventData = "外部按钮";                     btn2.dispatchEvent(Event);//将事件分派到事件...刷新页面 点击“外部BTN” 结果如图所示 因为事件的引发者没有在panl1所以不会再触发panel1的事件了 以上说的都是非冒泡事件事件的执行顺序是从外层容器到内层容器执行的 5....是false 这样设置后就是冒泡事件事件的执行顺序是从内层容器到外层容器执行的 6....如果即要捕捉非冒泡事件,又要捕捉冒泡事件 那么 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数

    89210

    jQuery:详解jQuery事件(一)

    jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件处理能力。   ...一、jQuery事件   1、加载DOM:   执行时机:在常规的JavaScript,通常使用window.onload方法,而在jQuery,使用的是$(document).ready()方法...要解决这个问题,可以使用jQuery的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件绑定一个处理函数。...第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页,单击“标题”链接将显示内容。   ...明天继续完成jQuery事件的下半部分,包括的内容有合成事件事件冒泡、移除事件等内容。

    1.7K20

    as3.0如何阻止事件冒泡?

    as3.0事件冒泡机制有时候会很烦人,比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后,如果两个Sprite都注册了Mouse_Down...事件,要想在Child上点击鼠标时系统只响应Child的Mouse_Down事件,默认是不行的,因为事件冒泡会让Container也响应Mouse_Down事件,示例代码: package { import...Adobe总不至于傻到弄二个功能一样的东东吧 官方的解释: stopImmediatePropagation():void 防止对事件当前节点中和所有后续节点中的事件侦听器进行处理。 ...stopPropagation():void 防止对事件当前节点的后续节点中的所有事件侦听器进行处理。...,stopPropagation将把该事件注册的所有监听处理函数执行完后,再阻止该事件继续向上冒泡;而stopImmediatePropagation方法将本次处理函数执行完后就立即阻止事件继续向上冒泡

    1.6K60

    事件冒泡事件捕获

    javascript 的事件捕获和事件冒泡之前一直没能弄明白,知道看到一个例子。...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制,对于事件处理就好办了。...阻止默认事件 event.preventDefault() // 阻止事件默认动作,比如阻止 submit 按钮默认提交 event.stopPropagation() // 阻止捕获 和 冒泡阶段事件的进一步传播...,比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失 事件代理: 从上面事件机制可以看出,如果没有外部干扰,在子节点上触发的事件,在捕获和冒泡最终都会经过父节点 因此,我们可以将事件处理函数绑定在父节点上面...这样做的好处一个是可以不关心子元素是同步还是异步的 另一个是如果有多个子元素,可以不用绑定多个事件(在异步列表 click 事件很常见)。

    1.7K10

    vue.js实现阻止事件冒泡

    当父子元素中都有点击事件的时候,为了让触发子元素事件时,不去触发父元素事件,可以在子元素事件添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。...方法二 可以自己写个阻止冒泡事件 然后在发生冒泡的元素调用这个事件 @click="_stopPropagation($event)" methods:{ _stopPropagation

    6.5K10

    从零开始学 Web 之 jQuery(七)事件冒泡事件参数对象,链式编程原理

    一、事件冒泡与阻止事件冒泡 事件冒泡:当一个元素触发某个事件的时候,会把这个事件传播到其父元素,一直到顶层元素。 阻止事件冒泡:在被触发事件的子元素添加 return false; 即可。...二、事件的触发 之前讲的绑定事件事件触发后的事件处理过程,并且上面的事件触发是被动的事件触发,怎么可以主动触发事件呢?...// 鼠标按下的键值 e.button // 按键按下的键值 e.keyCode // 触发该事件的目标对象,是一个 DOM 对象 // 当发生事件冒泡的时候,可以定位到具体发生事件的源对象,而不是冒泡的对象...还有一个问题,就是 jQuery val(); 在没有参数时时读取数值,不能链式编程;在有参数的时候是设置,可以链式编程。...☆ ☆ ☆ ☆ <script src="<em>jquery</em>

    77640
    领券