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

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

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

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

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

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

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

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

相关·内容

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

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

    55310

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

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

    1.9K20

    vue常用修饰符有哪些?

    修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发输入框值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: <!...尽管我们可以在方法中轻松实现这点,但更好方式是:方法只有纯粹数据逻辑,不是去处理 DOM 事件细节。 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。...-- 点击事件只会触发一次 --> 按键修饰符 在监听键盘事件时,我们经常需要检查常见键值。...换句话说,只有在按住 ctrl 情况下释放其它按键,才能触发 keyup.ctrl。单单释放 ctrl 也不会触发事件。...-- 没有任何系统修饰符被按下时候才触发 --> A 鼠标按钮修饰符 (1) .left (2) .right

    2.8K20

    事件高级

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

    1.2K10

    深入理解事件

    这种方法不属于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节点,仍然具有效果。

    83640

    13事件

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

    76230

    《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元素中其他点击事件都会被忽略。

    91330

    《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元素中其他点击事件都会被忽略。

    85720
    领券