<div @click="alert(1)">
      <a href="/#" @click.prevent.self="alert(2)">
        <div @click="alert(3)"></div>
      </a>
    </div>

点击div3,会alert3,alert1。不但阻止了alert(2),还阻止了a的默认跳转。

因为点击的时候会先prevent,阻止默认事件,阻止了跳转;然后判断是否是self,因为点击到的是div3,所以不是self,阻止了alert(2)。

<div @click="alert(1)">
      <a href="/#" @click.self.prevent="alert(2)">
        <div @click="alert(3)"></div>
      </a>
    </div>

点击div3,会alert3,alert1,跳转到/#。只阻止了alert(2)。

因为会先判断self,点击到div3,不是self,所以不会执行click事件,就不会执行 阻止默认事件和alert(2) ,所以可以跳转

Logo

前往低代码交流专区

更多推荐