vue 事件修饰符

  • .stop
  • .prevent
  • .capture
  • .self
  • .once   
    1 .stop  阻止冒泡修饰符
     <div @click="parent">parent
            <div @click.stop="child">child
                <div @click="grandson.stop">grandson</div>
            </div>
        </div>

     parent(){ console.log("parent")},
      child(){console.log("child")},
    grandson(e){console.log("grandson")}
    点击grandson,不加stop,控制台会出现这样的信息,

  • 2.capture  捕获
  •  <div @click.capture="parent">parent
            <div @click="child">child
                <div @click="grandson">grandson</div>
            </div>
        </div>


  • 点击grandson,控制台会出现这样的信息,

  • #####################################################这里是阻止事件传播
     <div @click.capture.stop="parent">parent
            <div @click="child">child
                <div @click="grandson">grandson</div>
            </div>
        </div>

  • 3.once  只执行一次
  •  <div @click="parent">parent
            <div @click.once="child">child
                <div @click="grandson">grandson</div>
            </div>
        </div>

    这里第一次点击grandson三个都出现,但点击第二次的时候child就不出现了

    4.self  只点自己身上才运行

     <div @click="parent">parent
            <div @click.self="child">child
                <div @click="grandson">grandson</div>
            </div>
        </div>
    5 .prevent  阻止元素发生默认行为
    这个代码只会输出parent,不会发生跳转,从而阻止浏览器的默认行为
    <a href="www.baidu.com" @click.prevent="parent"></a>





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值