vue——@click的事件命令以及修饰符

1、@click.stop  阻止事件冒泡

//只弹出“noclick”
  阻止单击事件继续传播   

2、@click.prevent  阻止事件的默认行为 （提交事件不再重载页面）

百度一下   //阻止a标签跳转，仅执行函数test1
   //阻止表单提交，仅执行函数test2
//有时右键点击会带出提示框，用.prevent 只会执行show2

3、@click.capture   优先触发

1. //添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

//添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
123
//此处的代码因为div2有capture关键字，所以此时冒泡的顺序发生了改变//正常情况下：//点击div3一层一层冒泡，先div3=》div2=》div1//加了关键字之后：//点击div3时，先div2=》div3=》div1

4、@click.self    只有自己能触发，子元素无法触发

（1）v-on:click.prevent.self 会阻止所有的点击

 （2）v-on:click.self.prevent 只会阻止对元素自身的点击

//此时点击a标签会依次弹出2，1，跳转。点击div标签会依次弹出3，2，1，跳转。这发生了事件冒泡。
a标签div标签
//此时点击a标签会依次弹出2，1。点击div标签会依次弹出3，1。此时各位看官已经发现，a标签不仅没有冒泡，也没有跳转，这就是官网说的会阻止所有的点击。
a标签div标签
//点击div标签会依次弹出3，1，跳转。此时a标签没有响应弹框，但是发生了跳转，这就是官网说的只会阻止对元素自身的点击。
a标签div标签

 5、@click.once  只能提交一次（.once 修饰符还能被用到自定义的组件事件上。）

6、@click.native

//给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）//等同于在自组件中：子组件内部处理click事件然后向外发送click事件：$emit("click".fn)

 7、.passive

...

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

8、@keyup.enter //按键修饰符（按键码的别名：.enter ，.tab ，.delete ，.esc ，.space ，.up ，.down ，.left ，.right ）

//按下enter时，执行方法test3methods: {test3 (event) {console.log(event.keyCode)alert(event.target.value)}}

 你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

 9、系统修饰键（.ctrl , .alt , .shift ,.meta ）

Do something

 10、.exact修饰符

//.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

A
A
A

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！