事件冒泡解决办法

原创于 2021-07-12 15:06:02 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #event #vue.js #html

笔记本专栏收录该内容

38 篇文章

订阅专栏

本文介绍了JavaScript中常见的事件冒泡现象，即点击内层元素会触发内外层所有绑定的点击事件。通过示例展示了如何使用`event.stopPropagation()`方法阻止事件冒泡，以及在Vue中使用`.stop`修饰符实现相同效果。了解这一概念对于优化前端交互和提高代码效率至关重要。

事件冒泡解决办法

假设有外层元素和内层元素，两个元素都绑定了点击事件，当只点击内层元素会同时出发内层元素和外层元素的事件，就是事件冒泡

举个例子：
这里有内层的按钮，中层的 div 块和外层的 div 块

		<div @click = "outside" id = "outside">
            outside
            <div @click = "middle" id = "middle">
                middle
                <button @click = "inner">
                    点我
                </button>
            </div>
        </div>

在这里插入图片描述
绑定事件：

				inner: function(){
                    console.log('inner')
                },
                middle: function(){
                    console.log('middle')
                },
                outside: function(event){
                    console.log('outside')
                }

当只点击 button 按钮，输出如下：
在这里插入图片描述
这就是事件冒泡

解决办法：

1、 event.stopPropagation()
在会发生冒泡的事件中，在 event 事件上绑定 stopPropagation

					inner: function(){
                        console.log('inner')
                        event.stopPropagation()
                    },
                    middle: function(){
                        console.log('middle')
                        event.stopPropagation()
                    },
                    outside: function(event){
                        console.log('outside')
                    },

绑定 stop 事件修饰符

		<div @click = "outside" id = "outside">
            outside
            <div @click.stop = "middle" id = "middle">
                middle
                <button @click.stop = "inner">
                    点我
                </button>
            </div>
        </div>