Vue中的事件冒泡和捕獲


Vue中的事件冒泡和捕獲
.stop 阻止冒泡事件
.capture 設置捕獲事件
.self 只有點擊當前元素的時候,才會觸發處理函數
.once處理函數只被觸發一次
1.當一個父元素div1 包裹着一個子元素div2 同時有點擊事件,
我們點擊子元素,不想觸發父元素的事件,我們可以采用阻止事件冒泡解決
@click.stop

2設置捕獲事件.
當一個父元素div1 包裹着一個子元素div2 同時有點擊事件。
我們希望點擊從外面執行到里面,先觸發父元素再觸發子元素。
我們可以在父元素的點擊事件加上
@click.capture

3.當只有點擊自己本身元素才觸發事件,忽略冒泡和捕獲。
@click.self

4.事件只能觸發一次
@click.once

額外知識:

修飾符可以串聯使用

提交事件不會再重載頁面

  • @click.prevent
    滾動事件的默認行為 會立即觸發,不會等待onScroll完成,(包含了e.preventDefault())
    @scroll.passive
    passive可以提升移動端的性能


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM