Verstehen Sie schnell die 4 Möglichkeiten, um das Sprudeln von Ereignissen zu verhindern (native JS-Blockierung, Vue verwendet Modifikatoren zum Blockieren).

Möglichkeiten, das Sprudeln von Ereignissen zu verhindern

Front-End-Struktur

<div id="app">
    <div class="father-box" @click="clickFatherBox">
        我是父盒子
        <div class="son-box" @click="clickSonBox">
          我是子盒子
        </div>
    </div>
</div>

 methods: {
    
    
        clickSonBox(){
    
    
          alert("子盒子")
        },
        clickFatherBox(){
    
    
          alert("父盒子")
        }
},

Ereignissprudeln: Das clickFatherBox-Ereignis wird auch ausgelöst, wenn das clickSonBox-Ereignis auftritt

Klicken Sie an dieser Stelle auf das untergeordnete Feld. Das Dialogfeld wird zweimal angezeigt

Methode 1: Verwenden Sie js, um das Sprudeln von Ereignissen zu verhindern

clickSonBox(e){
    
    
    e.stopPropagation();
    alert("子盒子")
},
       
    //或者
    
clickSonBox(e){
    
    
     e.cancelBubble=true
     alert("子盒子")
   },

Methode 2: Verwenden Sie den Ereignismodifikator stop

Verwenden Sie beim Binden eines Ereignisses den Stop-Modifikator, um zu verhindern, dass das Ereignis sprudelt

<div class="father-box" @click="clickFatherBox">我是父盒子
    <div class="son-box" @click.stop="clickSonBox">
      我是子盒子
    </div>
</div>

Methode 3: Verwenden Sie den Ereignismodifikator self

Wenn Sie ein Ereignis binden, verwenden Sie den Selbstmodifikator, um anzugeben, dass es nur ausgelöst wird, wenn auf das Element geklickt wird

<div class="father-box" @click.self="clickFatherBox">
     我是父盒子
     <div class="son-box" @click="clickSonBox">
       我是子盒子
     </div>
 </div>

Notiz:

Der Selbstmodifikator sollte verwendet werden, wenn die übergeordnete Box an das Ereignis und nicht an die untergeordnete Box gebunden ist! Wenn Sie self im Ereignis der übergeordneten Box verwenden, klicken Sie auf die untergeordnete Box. Das Klickereignis der übergeordneten Box wird nicht ausgelöst, dh das Ereignis sprudelt nicht.

self gibt an, dass das Ereignis nur dann ausgelöst wird, wenn das aktuelle Element ein Ereignis hat