vue中防止子元素點擊事件干擾父元素雙擊事件
在Vue應用中，子元素的click事件可能會干擾父元素的dblclick事件，尤其是在快速雙擊子元素時。本文提供兩種解決方案。
問題示例：
假設有以下Vue組件：
<template> <div @dblclick="changeFullScreen"> <div @click="showPreset"></div> </div> </template> <script> export default { methods: { showPreset(Event) { console.log('aaaaa'); }, changeFullScreen(event) { console.log('bbbb'); } } }; </script>
簡單使用@click.stop并不能解決問題，因為click和dblclick是不同的事件。
立即學習“前端免費學習筆記（深入）”；
解決方案一：在子元素上添加空雙擊事件
在子元素上添加一個@dblclick事件，并綁定一個空函數，阻止雙擊事件冒泡：
<template> <div @dblclick="changeFullScreen"> <div @click="showPreset" @dblclick="noop"></div> </div> </template> <script> export default { methods: { noop() {}, showPreset(event) { console.log('aaaaa'); }, changeFullScreen(event) { console.log('bbbb'); } } }; </script>
noop函數什么也不做，但阻止了dblclick事件向上冒泡。
解決方案二：在父元素事件處理函數中判斷事件目標
在父元素的dblclick事件處理函數中，檢查event.target是否為父元素本身。只有當雙擊事件直接作用于父元素時，才執行相應操作：
<template> <div @dblclick="changeFullScreen"> <div @click="showPreset"></div> </div> </template> <script> export default { methods: { showPreset(event) { console.log('aaaaa'); }, changeFullScreen(event) { if (event.target === this.$el) { console.log('bbbb'); } } } }; </script>
this.$el指向父元素的dom節點。只有當event.target與this.$el相等時，才執行console.log(‘bbbb’)。
兩種方法都能有效防止子元素點擊事件干擾父元素雙擊事件，選擇哪種方法取決于具體情況和個人偏好。 第一種方法更簡潔直接，第二種方法更靈活，可以根據需要在父元素雙擊事件中添加更多邏輯判斷。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
喜歡就支持一下吧
相關推薦
