vue事件修饰符self
时间: 2023-09-14 09:08:35 浏览: 70
在Vue中,事件修饰符self用于指定只有当事件在该元素本身(而不是其子元素)触发时才会触发回调函数。引用中的例子可以解释这一点。在这个例子中,如果div元素被点击,doThat函数会被调用,但是如果div元素的子元素被点击,doThat函数则不会被调用。所以,事件修饰符self用来限制事件只能在元素本身触发时才执行相应的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue 事件修饰符.self的用法](https://blog.csdn.net/qq_33706382/article/details/96478908)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关问题
vue事件修饰符有哪些
Vue事件修饰符一共有6个,分别是prevent、stop、once、capture、self和passive。其中,prevent用于阻止默认事件,stop用于阻止事件冒泡,once用于事件只触发一次。capture用于使用事件的捕捉模式,self只有event.target是当前操作的元素时才触发事件,passive用于事件的默认行为立即执行,无需等待事件回调执行完毕。\[1\]这些修饰符可以单独使用,也可以多个修饰符一起使用,并且可以随意顺序组合使用。\[2\]\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [Vue常见的事件修饰符](https://blog.csdn.net/weixin_46713508/article/details/129404994)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
vue事件修饰符.passive
在Vue中,事件修饰符`.passive`用于告诉浏览器,你不想阻止事件的默认行为。这与普通的`preventDefault`方法不同。`preventDefault`会完全阻止事件的默认行为,而`.passive`只是告诉浏览器你不想阻止默认行为,但并不会主动去阻止它。这在一些特定场景下非常有用,例如滚动事件的监听,当你需要监听滚动事件但不想阻止页面的滚动时,可以使用`.passive`修饰符。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue中的事件修饰符.self、.capture和.passive](https://blog.csdn.net/xiaolinlife/article/details/107013723)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue 事件修饰符 .passive 最通俗的理解](https://blog.csdn.net/chunxiaqiudong5/article/details/126083075)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]