About how to prevent child elements from triggering events of parent elements in Vue

 When clicking on the application evaluation, the click event of the parent behind is not triggered; the click event of the parent behind is to make this application evaluation disappear, and the click event of this application evaluation is to launch the application evaluation pop-up box;

The general method:

<div class="step" @click.stop=""> </div> //子盒子

You only need to bind the click.stop event directly on the box;

However, when using some UI frameworks, direct use will fail;

The solution at this time is to put another box on the outer layer of the UI label and then bind the click.stop event;

 <div class="step" @click.stop>
              <van-stepper
                  v-model="item1.count"
                  theme="round"
                  button-size="20"
                  input-width="20"
                  min="0"
                  default-value="0"
                 
                />
</div>

Another way is to directly @click.native.stop can also prevent bubbling

<van-stepper @click.native.stop />

Guess you like

Origin blog.csdn.net/weixin_51747462/article/details/130226161