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
喜歡就支持一下吧
相關推薦