Vue中的事件冒泡和捕获

Vue中的事件冒泡和捕获
.stop 阻止冒泡事件
.capture 设置捕获事件
.self 只有点击当前元素的时候,才会触发处理函数
.once处理函数只被触发一次
1.当一个父元素div1 包裹着一个子元素div2 同时有点击事件,
我们点击子元素,不想触发父元素的事件,我们可以采用阻止事件冒泡解决
@click.stop

2设置捕获事件.
当一个父元素div1 包裹着一个子元素div2 同时有点击事件。
我们希望点击从外面执行到里面,先触发父元素再触发子元素。
我们可以在父元素的点击事件加上
@click.capture

3.当只有点击自己本身元素才触发事件,忽略冒泡和捕获。
@click.self

4.事件只能触发一次
@click.once

额外知识:

修饰符可以串联使用

提交事件不会再重载页面

  • @click.prevent
    滚动事件的默认行为 会立即触发,不会等待onScroll完成,(包含了e.preventDefault())
    @scroll.passive
    passive可以提升移动端的性能

推荐这些文章:

事件委托及其作用

1.什么是事件委托
  事件委托指的是将子元素的事件委托给父元素,依赖的原理是事件冒泡,事件冒泡是指子元素的事件被触发,他会传递给父元素,父元素的事件也会被触发,一直传递到根节点(给父元素设置事件委托,依赖事件冒泡来对子元素进行设置)
2.事件委托的作用(好处)
  (1)减少内存消耗和dom操作,提高性能
  (2)动态绑定事件,因为事件绑定在父级元素,所以新增的元素也触发同样的事件

...

前端---涉及组件包含输入框,触发组件内非输入框click点击事件,优先触发了输入框失焦事件问题

输入框失焦事件高于click点击事件,如果想要优先触发点击事件,则应把click触发改为onmousedown,并在触发事件后添加阻止浏览器默认事件

@mousedown="handleSelect($event, item)"

  

handleSelect(ev, item) {
// input失焦事件高于点击事件,所以用mouse down并阻止浏览器默认事件
ev.preventDefault();

  

...

jquery绑定点击事件的四种写法

https://blog.csdn.net/qq_43459224/article/details/104993145
$(".tab").click(function () { })
$(".tab").on(“click”,function () { })
$(document).on(“click”, “.tab”,function () { })
使用<οnclick="">触发函数
以上四种方法在不同设备上的可行程度
自测。
3>2>1>4
//所有 class="tab" 的元素

...

js的事件冒泡与事件捕获

事件冒泡和事件捕获的联系:
(1)、都是 事件触发时序问题 的术语。(2)、绑定事件方法(addEventListener)的第三个参数是控制事件触发顺序的,默认为false,即事件冒泡;若为true,即事件捕获。
事件冒泡和事件捕获的区别:
(1)、事件冒泡: 从触发事件的那个节点一直到document,是自下而上的去触发事件。(2)、事件捕获: 从document到触发事件的那个节点,即自上而下的去触发事件。

 
 
上述代码采用的事件冒泡机制:

1.当点击son元素时,先触发son的点击事件,再触发father的点击事件,打印相应的内容;2.当点击father元...

动态点击事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button v-o...

3-2 DOM 的事件机制,怎么阻止事件捕获/冒泡

什么是事件?
事件可以理解为消息,信号,事件的工作过程中,必然会产生三个概念 1. 事件源 2.事件 3.事件目标,也就是说当 事件目标注册事件后,由事件源开始 ,发送事件信息,给到事件目标的 过程,称为事件的生命周期
DOM 中的事件机制
DOM 定义了为 Event 的事件接口,用来表示事件,我们可以通过 Event 事件接口定义一个自定义事件,并且根据需要配置,是否支持冒泡,是否能被撤销等
事件中最重要进行通信的过程,就被称为事件的捕获和冒泡,事件的铺货和冒泡是顺序相反的,也就是事件会先从顶部节点一直捕获下去,寻找到注册事件的事件目标,并触发事件目标所注册的事件,并冒泡的顶部节点
ad...

【Unity日常】使用代码触发组件的事件

使用代码触发组件的事件
不通过使用界面的形式去触发组件的事件,使用代码触发事件。
GetComponent<Button>().onClick.Invoke();
通过事件.Invoke()的方式可以代码触发事件

...

我想在winform窗体1的btn1的点击事件触发btn2的单击事件,怎么做

问题
如题:
我想在winform窗体1的btn1的点击事件触发btn2的单击事件,我该怎么做?

最佳回答
可以直接调用bnt2的点击事件 btn2_click(null,null)

...

vue之事件修饰符( .stop、.prevent、 .capture 、.self、.once、passive)

 <a href="http://www.baidu.com" target="_blank" @click="afun($event)">百度</a>
 

  <a href="https://www.taobao.com" target="_blank" @click.prevent="dothis">淘宝</a>

方法阻止超链接执行点击事件

 afun(e)
    {
      e.preventDefault();
  &nb...

调整窗口大小触发事件

window.resize事件表示窗口改变的时候,就会触发的事件
 

...

文章标题:Vue中的事件冒泡和捕获
文章链接:https://www.dianjilingqu.com/51372.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>