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可以提升移動端的性能