Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别

布满荆棘的人生 2023-06-25 07:48 37阅读 0赞

1、" .stop “： 阻止冒泡，具体事例，在点击【戳他】按钮后，触发 input对应的函数 ‘btnHandler’，该函数执行完成后，会触发div的函数’ divHandler '，为了防止此类情况的发生，需要在Input的点击事件上添加” .stop "。

2、" .prevent " : 使用 " .prevent " 阻止默认行为，在超链接中的点击事件中使用该属性，超链接不会跳转而只执行函数对应的内容。

<a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a>

3、" .capture " ：实现捕获触发事件的机制，在点击【戳他】按钮后，先执行div标签的函数，再执行 【戳他】按钮，对应的函数。

<div class="inner" @click.capture="divHandler">
       
       <input type="button" value="戳他" @click.stop="btnHandler">
    </div>

4、" .self "： 只有点击当前元素的时候，才会触发事件处理函数。点击【戳他】按钮，只执行【戳他】按钮对应的函数，而不会冒泡执行div中的函数，div中的函数只有点击时才触发。

5、" .once ": 只触发一次事件处理函数。点击【有问题，先去百度】，执行a标签对应的函数，再次点击会跳转到百度页面。

6、" .stop “和” .self “的区别：” .self “只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为。” .stop "会阻止所有的冒泡的行为。

点击【戳他】后只执行【戳他】对应的函数，往上的两个div中的函数不执行。

点击【戳他】后，会执行 btnHandler和div2Handler函数，而不执行divHandler函数。

Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue之事件修饰符（ .stop、.prevent、 .capture 、.self）以及.stop与.self的区别

相关 vue @click.native和@click.stop和@click.self

相关 Python self用法详解

相关 Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别

相关 self.modules() 和 self.children()的区别

相关 _blank 和 _self的区别以及display:none和visibility:hidden的区别

相关 self.array 和 _array的区别

相关 Tk_Batis 介绍和用法以及和Jpa 的区别

相关 Oracle translate 函数的用法, 以及和replace的区别

相关 vue @click.native和@click.stop和@click.self