Vue中阻止table父元素冒泡的一些事件

逃离我推掉我的手 2022-02-25 08:12 230阅读 0赞

# 在@click的后面加上.stop，即@click.stop=“doSomething”,可阻止单击事件冒泡 #

（1）阻止单击事件冒泡

( 2 ) 让form提交事件不再重新加载页面

（3）修饰符串联的时候,用个a标签来看

使用修饰符的时候修饰符顺序很重要的，

<div @click="myfun1()">
        <a href="/#" @click="myfun2()">
             A标签
            <div @click="myfun3()">标签3</div>
        </a>
    </div>
    
    <script>
    methods: {
            myfun1(){
                console.log('1111111111')
            }
            myfun2(){
                console.log('2222222222')
            }
            myfun3(){
                console.log('3333333333')
            }
    }
    
    </script>

常理我们点击\*\*‘A标签’**会打印出以下结果并跳转  
‘2222222222’，  
‘11111111111’  
点击**‘标签3’\*\*会打印出如下结果并跳转  
‘3333333333’，  
‘2222222222’，  
‘11111111111’，  
如果我们添加修饰符`.prevent.self`之后的结果呢：

此时点击**A标签**打印出的是以下结果而且都**没有跳转**：  
‘2222222222’  
‘11111111111’  
点击**标签3**打印出：  
‘3333333333’，  
‘11111111111’，  
很显然加上`.prevent.self`后他阻止了自身的事件也阻止他人的事件。

那么我们再给修饰符的顺序换一下变成 `.self.prevent`,这下点击后又会发生什么呢：

这下点击**A标签**后打印出的是：  
此时点击**A标签**会依次打印出出‘22222222’，‘1111111111’，没有跳转。点击**标签3**会依次弹出‘33333333’，‘1111111111’，并跳转。  
此时大家都已经发现，这就是阻止对元素自身的点击。  
反正是有点绕的，不过自己多测试几次就知道了