事件冒泡解决办法

事件冒泡解决办法

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

举个例子：
这里有内层的按钮，中层的 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>

最后

以上就是内向篮球为你收集整理的事件冒泡解决办法的全部内容，希望文章能够帮你解决事件冒泡解决办法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。