vue-bound click event blocks bubbling instances

When we use vue to make projects, we often use the binding of click events, but when we tie it to a div, other buttons (such as deletion, modification) and other buttons will also load the click events of the div here. In fact, we don't need them. How to solve it:

First, let’s distinguish between event bubbles and event capture

(1) Bubble event: Events are triggered in the order from the most specific event target to the least specific event target (document object).

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

(2) Capturing event: The event starts from the most inaccurate object (document object) and then goes to the most accurate (events can also be captured at the window level, but must be specifically specified by the developer).

(3) DOM event flow: two event models are supported at the same time: capture event and bubble event, but capture event occurs first. Both event streams will touch all objects in the DOM, starting with the document object and ending with the document object.

&lt;span style="font-family:SimSun;font-size:14px;"&gt;  &lt;div class="tableContent" v-for="(items,index) in dataList" v-on:click="changeBacks(items)" :class="{tableContentHover:}"&gt; 
   &lt;ul&gt; 
    &lt;li&gt;&lt;span&gt;&lt;label :class="{labelChange:}"&gt;√&lt;/label&gt;&lt;/span&gt;&lt;label v-html=""&gt;&lt;/label&gt; &lt;/li&gt; 
    &lt;li&gt;&lt;label v-html=""&gt;&lt;/label&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;label v-html=""&gt;&lt;/label&gt;&lt;/li&gt; 
    &lt;li&gt; 
     &lt;label v-html="" v-if="&lt;=20" v-bind:class="'black'"&gt;&lt;/label&gt; 
     &lt;label v-html="" v-else-if="&lt;=40" v-bind:class="'green'"&gt;&lt;/label&gt; 
     &lt;label v-html="" v-else-if="&lt;=60" v-bind:class="'blue'"&gt;&lt;/label&gt; 
     &lt;label v-html="" v-else-if="&lt;=80" v-bind:class="'purple'"&gt;&lt;/label&gt; 
     &lt;label v-html="" v-else v-bind:class="'red'"&gt;&lt;/label&gt; 
    &lt;/li&gt; 
    &lt;li&gt;&lt;label v-html=""&gt;&lt;/label&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;button v-on:="deleteThis(index)"&gt;delete&lt;/button&gt;&lt;/li&gt; 
   &lt;/ul&gt; 
  &lt;/div&gt;&lt;/span&gt;

At this timebuttonClick event plus.stop, can solve the above problems.

The above example of the click event blocking bubbles by the vue-bound click event is all the content I share with you. I hope you can give you a reference and I hope you can support me more.