1.点击事件的event
(事件对象)
- 1
- 2
- 3
- 1
- 2
- 3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
调用函数的时候传入一个$event
参数进去,函数内部可以通过这个event
参数,获取鼠标点击的X
点和Y
点。
2.事件冒泡
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
点击“按钮”,会依次弹出1
,2
。说明先执行了show()
方法,然后执行了show2()
方法。这就是“事件冒泡”。
阻止冒泡
利用我们上面讲过的event
对象。
在调用函数时传入:
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
然后在show()
方法里可以组织冒泡:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
这样show2()
就不会执行了。
利用vue的方法阻止冒泡
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
注意此时我们没有event
对象,而是在给HTML元素绑定click事件的时候,改为@click.stop="show()"
。
3.默认行为
contextmenu右键菜单
- 1
- 2
- 3
- 1
- 2
- 3
点击右键也会执行show()
方法,但是执行完之后会打开右键菜单的默认行为。
如何阻止这种默认行为?