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

单击按钮将触发该div的onClick(),而stopPropagation仅触发一次。为什么只有一次?

在前端开发中,当单击一个按钮时,事件会依次向上级元素传播,直到传播到文档的根元素。这个过程称为事件冒泡。而stopPropagation()是一个方法,它可以阻止事件继续向上级元素传播。

当我们给一个div元素添加了onClick()事件处理函数,并且在该函数内调用了stopPropagation()方法时,它会阻止事件继续向上级元素传播,从而只会触发一次。

如果没有调用stopPropagation()方法,事件会继续向上级元素传播,可能会导致多次触发事件。这是因为在事件冒泡过程中,父级元素可能也有onClick()事件处理函数,当事件传播到父级元素时,父级元素的onClick()事件处理函数也会被触发。

需要注意的是,stopPropagation()只能阻止事件继续向上级元素传播,而不能阻止同一级别元素上的其他事件处理函数的执行。

推荐的腾讯云相关产品:腾讯云函数(云原生无服务器计算平台),具体产品介绍可以参考腾讯云函数

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Vue 3 事件处理

    事件处理 实验介绍 页面上会有很多的页面交互,例如用户点击按钮,会触发什么样的事件,这个事件要做什么事情,就会涉及到事件处理。...尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 为了解决这个问题,Vue.js 为 v-on 提供了「事件修饰符」。...-- 点击事件将只会触发一次 --> 不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。...-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> 而不会等待 `onScroll` 完成 --> 的时候才触发 --> onClick">A 鼠标按钮修饰符 .left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮

    2K20

    【前端 · 面试 】JavaScript 之你不一定会的基础题(二)

    答案是: 第一次结果为:先弹出“child 事件触发,child”,再弹出“parent 事件触发,parent”。...然后,它移动到中单击元素的下一个祖先元素,并执行相同的操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击的元素。...这两个阶段如下图所示: [bubbling-capturing] 在现代浏览器中,默认情况下,所有事件处理程序都在冒泡阶段进行注册,这也是为什么只有一个阻止冒泡方法的方法 event.stopPropagation...(),而没有阻止捕获的方法,因为完全没必要。...主流浏览器都默认在冒泡阶段进行事件注册,所以,只有阻止冒泡的方法而没有阻止捕获的方法。

    55510

    DOM事件基本概念大总结(前端必备)

    比如点击某一个按钮,而它是由上一层的父标签,或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢?...:输出为 div;因为该执行函数就绑定在该元素上 情况三:点击 div;只触发 father() target 和 currentTarget 都为 div 另外,执行函数中的 this 值指向...我们知道一般事件是在处于目标阶段到冒泡阶段执行的。倘若不阻止冒泡,那么点击一个小按钮,一直回溯到 document。那么整个页面许多地方的点击事件都会触发,很显然我们不想这样。...click 点击,只有按下事件和放开事件发生后才会触发,只是按下不会触发 dblclick 双击,当且仅当连续两次 click 时触发 触发顺序: mousedown mouseup click...触摸屏 上述事件在移动端上又有所不同 并不支持 dblclick ,双击只会放大 轻击不可单击或者没有绑定 click 的元素什么事件也不会发生 在可点击或者绑定 click 的前提下点击会触发

    1.9K20

    事件高级

    eventTarget(目标对象)上,当该对 象触发指定的事件时,就会执行事件处理函数。...该方法接收两个参数:  eventNameWithOn:事件类型字符串,比如 onclick 、onmouseover ,这里要带 on  callback: 事件处理函数,当目标触发事件时回调函数被调用...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),  这时候this指向的是父元素,因为它是绑定事件的元素对象...,  而target指向的是子元素,因为他是触发事件的那个具体元素对象。...事件委托的原理 给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。 事件委托的作用 我们只操作了一次 DOM ,提高了程序的性能。

    1.2K10

    JavaScript停止冒泡和阻止浏览器默认行为

    如在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。...如: div id='div' onclick='alert("div");'> onclick='alert("ul");'> onclick='alert("li");'>test... div> 上面的代码,Demo如下,我们单击test时,会依次触发alert(“li”),alert(“ul”),alert(“div”),这就是事件冒泡。...的话则既阻止默认行为又防止对象冒泡 下面这个使用原生js,只会阻止默认行为,不会停止冒泡 div id='div'  onclick='alert("div");'> onclick='alert...; }; 下面这个是使用jQuery,既阻止默认行为又停止冒泡 div id='div'  onclick='alert("div");'> onclick='alert("ul");'>

    2.2K20

    深入理解事件

    这种方法不属于w3c标准,并且仅IE8及以下支持该方法; ②事件类型要加on; ③如下图,b中声明a函数时分配了一块内存地址 ,两个dom.attachEvent('onclick',a)中的a都指向的是下面定义的...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...比如说只有点击li才会触发,不怕,我们有绝招: 事件本身是一个对象,即Event对象,事件发生时该对象作为参数传给回调函数。...li会触发事件了,且每次只执行一次dom操作,如果li数量很多的话,将大大减少dom的操作,优化的性能可想而知!...请看例三: 我们的需求是是: ①移入li,li变红,移出li,li变白 ②对于点击按钮后新增的li节点,仍然具有该效果。

    84040

    13事件

    特定API事件:这些事件多用于特定场景的实现,例如 HTML5中提供的拖放API中的事件等 与错误处理的相关事件 注册事件 注册事件指:就是将 Javascript函数与指定的事件相关联。...通过事件属性 onclick="fn()">按钮 function fn() { console.log...移除注册事件 移除事件只有removeEventListener(),DOM标准规范提供的 removeEvenListener()方法,调用该方法表示向指定元素移除事件监听器。...事件流 捕获阶段(网景公司提出) 按照DOM树结构由 documenti对象向下的顺序传播,直到目标元素为止 目标阶段 该阶段就是指目标元素触发当前事件。...因为注册事件已经委托给了该元素的祖先元素完成。 简化逻辑代码 这种方式只需要祖先元素一次注册事件,而不需要分别为大量元素注册事件。

    76930

    《JavaScript 模式》读书笔记(8)— DOM和浏览器模式1

    second paragraph'); p.appendChild(t); frag.appendChild(p); document.body.appendChild(frag);   在这个范例中活动的文档仅仅更新了一次并触发一次屏幕重绘...事件处理 通常事件处理是通过为元素附加事件监听器来实现的,例如有一个按钮,该按钮在每次单击后都会增加一次计数。...b.innerHTML = "Click me: " + count; }   如果希望在一次单击后执行多个函数功能,仍然维持采用现在的松耦合模式是无法做到的。...如果在div元素汇总有10个按钮,只需要为该div元素附加一个事件监听器就可以实现为每个按钮分别附加一个监听器的效果。   ...然后只需要对之前范例中使用的myHandler()函数做微小修改(需要过滤不感兴趣的点击事件),就可以直接使用。在这种情况下,只需寻找按钮的点击事件,而同一个div元素中其他点击事件都会被忽略。

    91430

    《JavaScript 模式》读书笔记(8)— DOM和浏览器模式1

    second paragraph'); p.appendChild(t); frag.appendChild(p); document.body.appendChild(frag);   在这个范例中活动的文档仅仅更新了一次并触发一次屏幕重绘...事件处理 通常事件处理是通过为元素附加事件监听器来实现的,例如有一个按钮,该按钮在每次单击后都会增加一次计数。...b.innerHTML = "Click me: " + count; }   如果希望在一次单击后执行多个函数功能,仍然维持采用现在的松耦合模式是无法做到的。...如果在div元素汇总有10个按钮,只需要为该div元素附加一个事件监听器就可以实现为每个按钮分别附加一个监听器的效果。   ...然后只需要对之前范例中使用的myHandler()函数做微小修改(需要过滤不感兴趣的点击事件),就可以直接使用。在这种情况下,只需寻找按钮的点击事件,而同一个div元素中其他点击事件都会被忽略。

    86720

    Vue修饰符

    、a标签的跳转就是默认事件: test .self: 只有元素本身触发时才触发方法,就是只有点击元素本身才会触发。...比如一个div里面有个按钮,div和按钮都有事件,我们点击按钮,div绑定的方法也会触发,如果div的click加上self,只有点击到div的时候才会触发,变相的算是阻止冒泡: div @click.self...="test">div> .once: 只能用一次,无论点击几次,执行一次之后都不会再执行: div @click.once="test">div> .capture: 事件的完整机制是捕获-...-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> 而不会等待 `onScroll` 完成 --> 的键码对应表: test 注意,只有你点击过一次或者聚焦到这个输入框才能使用键盘触发

    41720
    领券