vue はイベントのバブリングとキャプチャを防ぎます

vue はイベントのバブリングとキャプチャを防ぎます

@click.stop: イベントのバブリングを防止
@click.prevent: イベントのデフォルト動作を防止
@click.self: イベントは要素自体にのみ作用し、そのサブ要素には作用しません。

vue はイベントのバブリングを防ぎます

方法 1: vue を使用して、子要素のクリック イベントがバブリングしないようにします。シンプル: stop を直接使用できます。

<div @click="test1()">    
    <span @click.stop="test2()">按钮1</span>    
    <span>按钮2</span> 
</div>

この方法では、div 内のボタン 1 をクリックしても、div バインディング時間の test1() メソッドはトリガーされません。

方法 2: バブリングを防ぐ独自のイベントを作成し、バブリングが発生する要素でこのイベントを呼び出すことができます: @click="stopPropagation($event)"

methods：{      
    stopPropagation(ev){      
        var _this = this;      
        ev.stopPropagation();      
    },
}