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节点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407615.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gcc -fPIC选项

使用 -fPIC 选项&#xff0c;会生成 PIC 代码。.so 要求为 PIC&#xff0c;以达到动态链接的目的&#xff0c;否则&#xff0c;无法实现动态链接。non-PIC 与 PIC 代码的区别主要在于 access global data, jump label 的不同。比如一条 access global data 的指令&#xff0c;n…

Sharepoint的文档库用资源管理器方式浏览报错“Explorer View ”解决方案。

最近在安装Wss3.0时候&#xff0c;在拷贝已存在资料到客户电脑上时&#xff0c;打开客户的文档库的资源管理器的时候&#xff0c;提示Explorer view 错误&#xff0c;而且客户端访问的时候也报错。 在经过N多的查询和搜索之后终于找到的了解决方法。原来如此http://207.46.19.1…

stylus之插值(Interpolation)

插值(Interpolation)&#xff1a; 插值&#xff1a; Stylus支持通过使用{}字符包围表达式来插入值&#xff0c;其会变成标识符的一部分。例如&#xff0c;-webkit-{‘border’ ‘-radius’}等同于-webkit-border-radius 比较好的例子就是私有前缀属性扩展 变身 选择器…

iOS 两个tableview的 瀑布流

iOS 两个tableview的 瀑布流1. [代码]Objective-C //// DocViewController.m// getrightbutton//// Created by 隋文涛 on 12-12-9.// Copyright (c) 2012年 隋文涛. All rights reserved.//#import "DocViewController.h"#define heightofimage(image) imag…

javascript学习系列(4):数组中的some方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s…

Oracle工具使用(export,import,sqlldr中文帮助及实例))

1.1 EXPORT 1.1.1 帮助 exp是Oracle的一个可执行程序&#xff0c;存放目录$ORACLE_HOME/bin exp导出工具将数据库中数据备份压缩成一个二进制系统文件.可以在不同OS间迁移 它有三种模式&#xff1a; 用户模式&#xff1a;导出用户所有对象以及对象中的数据&#xff1b; 表…

stylus之运算符(Operators)

运算符(Operators): 运算符优先级: 下表运算符优先级&#xff0c;从最高到最低 一元运算符: 以下一元运算符可用”!”,”not”,”-“,””以及”~” 逻辑运算符not的优先级较低&#xff0c;因此&#xff0c;下面这个例子可以替换 用 二元运算符: 下标运算符[]允…

触发器-MSSQL常用操作

这里只打算讲解四部分了&#xff0c;也就最简单、最常用的四部分。1、触发器。定义&#xff1a; 何为触发器&#xff1f;在SQL Server里面也就是对某一个表的一定的操作&#xff0c;触发某种条件&#xff0c;从而执行的一段程序。触发器是一个特殊的存储过程。常见的触发器有三…

Android环境的安装遇到的问题

其实开始做Android&#xff0c;根本没有想过自己会在安装Android环境方面遇到什么问题。可是谁有知道呢&#xff1f;其实很多人都会遇到这些安装问题。 下载一个JDK,大家都是知道的&#xff0c;Android嘛&#xff0c;基本语言是java&#xff0c;所以&#xff0c;要搭建一个java…

javascript学习系列(5):数组中的reduce方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

oracle数据导入sqlldr小例子

表结构&#xff1a;emp Sql代码 create table EMP ( empno NUMBER(4) not null, ename VARCHAR2(10), job VARCHAR2(9), mgr NUMBER(4), hiredate DATE, sal NUMBER(7,2), comm NUMBER(7,2), deptno NUMBER(2) …

stylus之混合书写(Mixins)

混合书写(Mixins) Mixins&#xff1a;Mixins是预处器中的函数。平时你在写样式时某段CSS样式要经常重复性的用到多个元素中&#xff0c;这样你就需要重复的写多次。在CSS预处器中&#xff0c;你可以为这些公用的CSS样式定义一个Mixin&#xff0c;然后在你CSS需要使用这些样式的…

javascript学习系列(6):数组中的pop等方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

Android -- 发送Broadcast、有序无序

普通广播 优缺点&#xff1a;和有序广播的优缺点相反&#xff01;发送广播的方法&#xff1a;sendBroadcast()有序广播 …

sqlldr导入数据到数据库

1. 建立一张测试表T_Test create table T_TEST (ID INTEGER,UNAME VARCHAR2(50),AGE INTEGER ) 2. 建立数据文件infile.data(文本文件), 内容如下&#xff1a; 1,张明,20 2,zhou ming, 22 3, 王华good, 25 3. 建立控制文件: T_Test.ctl&#xff0c;文件内容如下&am…

javascript学习系列(7):数组中的concat方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说c…

stylus之方法(Functions)

方法(Functions): 函数:Stylus强大之处就在于其内置的语言函数定义。定义与混入(mixins)一致却可以返回值 返回值: 很简单的例子&#xff0c;两数值相加的方法 我们可以在特定条件下使用该方法&#xff0c;如在属性值中 渲染 默认参数: 可选参数往往有个默认的给定…

[leetcode] Combinations

Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For example,If n 4 and k 2, a solution is: [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ]https://oj.leetcode.com/problems/combinations/ 思路&#xff1a;递归&#xff0c;依次…

硬盘安装xp

基本上没有谁从硬盘安装win系统&#xff0c;除非迫不得已&#xff0c;例如我&#xff0c;没有光驱。 从硬盘安装&#xff0c;并非ghost,有的电脑如果ghost的话&#xff0c;经常会提示hal.dll丢失或在载入时重启&#xff0c;这可能都是主板驱动问题。下面是几点要注意的事项&…

stylus之关键字参数(Keyword Arguments)

关键字参数(Keyword Arguments) 关键字参数&#xff1a; Stylus支持关键字参数&#xff0c;或”kwargs”. 允许你根据相关参数名引用参数 下面这些例子功能上都是一样的。但是&#xff0c;我们可以在列表中的任何地方放置关键字参数。其余不键入参数将适用于尚未得到满足的参…