vue事件委托传递节点防止向下传递穿透

例如：

<li @click="popSelect($event)"><span>Bank Country</span><input type="text" placeholder="Select bank country" v-model="model.bank_country" name="bank_country" readonly /><van-icon name="arrow-down"></van-icon><em>Country is required</em></li>

li上绑定popSelect($event)方法

popSelect: function (e) {var ele = e.target;console.log(ele.localName);if(ele.localName == 'li'){}
}

点击li时会穿透到子集，span、input等标签，这时你拿到的e.target就不确定是哪个节点，但是你又需要操作的只是li，用@click.stop等等都没用，因为这是防止向上冒泡，这是可以利用css。例如：

.enter-account ul li span {pointer-events:none;
}

在你不想点到的节点上添加pointer-events:none;这行css，就取消了它的点击事件，这时你无论点li的任何地方，获取到的e.target都是li节点。

vue事件委托传递节点防止向下传递穿透相关推荐

js 用事件委托实现删除节点
用事件委托来处理子节点的相同点击事件的好处是 1.假如节点是动态生成的不需要在手动添加点击事件 2.不用循环遍历为每一个子节点添加点击事件代码实现思路 // 获取父节点元素var nUls = do ...
【Android 事件分发】MotionEvent.ACTION_DOWN 按下事件分发流程( Activity | ViewGroup | View )
Android 事件分发系列文章目录 [Android 事件分发]事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) [Andr ...
View的事件体系之三 android事件分发机制详解（下）
接着上一篇来分析事件分发机制,在看了各位大牛的关于事件分发机制的分析后茅塞顿开,之前看过好几遍郭霖,弘扬以及玉刚大神关于事件体系的讲解,一直看不懂,比较模糊,最近复习时,看到一篇博文,写的相当精彩,看 ...
unwind neo4j_Neo4j 2.1：传递节点ID与UNWIND
unwind neo4j 当Neo4j 2.1发布时,我们将拥有UNWIND子句,该子句使处理事物集合变得更加容易. 在我的有关创建邻接矩阵的博客文章中,我们想要显示按字母顺序排列的前5个见面组中有多 ...
Neo4j 2.1：传递节点ID与UNWIND
在发布Neo4j 2.1时,我们将具有UNWIND子句,该子句使处理事物集合更加容易. 在我的有关创建邻接矩阵的博客文章中,我们想要显示按字母顺序排列的前5个见面组中有多少人,然后检查其他各组中有多少 ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
vue利用事件委托实现按钮互斥,并传递对应的值
效果如下: 事件委托:也称事件代理原理:事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理这一类型的所有事件. 应用场景:我有一个ul标签,下面有很多li标签,每个li标签都需要添加事件,难 ...
JS事件委托(什么情况下使用事件委托)
1. 什么是事件委托事件委托:把事情委托给别人,代为处理. 事件委托也称为事件代理,在 jQuery 里面称为事件委派. 理解:说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的 ...
13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...

vue事件委托传递节点防止向下传递穿透

vue事件委托传递节点防止向下传递穿透相关推荐

最新文章

热门文章