vue-阻止事件冒泡-开启右键-键盘类事件
一: 阻止事件冒泡
布局:
- 当点击按钮时,会触发button的click 也会触发父级的方法
<div id="box">
<div @click="parentShow">
<button type="button" @click="show()">按钮</button>
</div>
</div>
具体实现:
- 第一种方法,传入一个event对象,然后对象里有cancelBubble 方法。设置为true
<div id="box">
<div @click="parentShow">
<button type="button" @click="show($event)">按钮</button>
</div>
</div>
methods: {
show: function(ev){
alert(1);
ev.cancelBubble = true;
},
parentShow: function(){
alert(2);
}
}
- 第二种方法是vue封装好的,直接在click的后面加上 .stop,简单好记,建议使用
<div id="box">
<div @click="parentShow">
<button type="button" @click.stop="show()">按钮</button>
</div>
</div>
二:阻止左键,开启右键行为
- 按钮的右键行为,vue事件。这里的prevent 是关闭默认行为,相当于 传个$event 然后 event.preventDefault();
<button type="button" @contextmenu.prevent="show1()">按钮</button>
三:键盘类事件
- keyup、keydown 是监听键盘按下,弹起事件,后面的.enter是指定键盘的按键,比如常见的:up、down、left、right、enter、tab 等
<input type="text" @keyup.enter="show2()" />
- 也可以通过$event的keyCode 来获取键盘的值。比如:
<input type="text" @keydown="show2($event)" />
show2: function(ev){
console.log(ev.keyCode);
}
如果输入这些,控制台将打印出:
vue-阻止事件冒泡-开启右键-键盘类事件的更多相关文章
- window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理
window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理 写PC下拉菜单的时候,hover样式显示下拉菜单,可能会这样写 <li class="xb_li1" ...
- JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡
对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...
- 关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
- JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...
- js去掉浏览器右键点击默认事件(+vue项目开启右键行为)
js去掉浏览器右键点击默认事件 1.阻止整个页面所有的右击事件 document.oncontextmenu = function(){ return false;} 2.特定的区域/元素 docum ...
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- js区分鼠标单双击 阻止事件冒泡
function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...
- javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件
1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
随机推荐
- windows控制台(console)乱码
在cmd中输入 CHCP 65001,实操有效.记录一下 永久设置,代码如下: Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Cons ...
- android全屏下的输入框未跟随软键盘弹起问题
最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { p ...
- GFS分布式文件系统理论个人总结
GlusterFS 两种模式 可以通过TCP/IP和RDMA高速网络互连,客户端可通过原生Gluster协议访问数据 没有GlusterFS客户端的可以通过NFS/CIFS标准协议通过存储网关访问数据 ...
- [luogu1397 NOI2013] 矩阵游戏 (数学)
传送门 Description 婷婷是个喜欢矩阵的小朋友,有一天她想用电脑生成一个巨大的n行m列的矩阵(你不用担心她如何存储).她生成的这个矩阵满足一个神奇的性质:若用F[i][j]来表示矩阵中第i行 ...
- 三剑客基础详解(grep、sed、awk)
目录 三剑客基础详解 三剑客之grep详解 1.通配符 2.基础正则 3.grep 讲解 4.拓展正则 5.POSIX字符类 三剑客之sed讲解 1.sed的执行流程 2.语法格式 三剑客之Awk 1 ...
- php进程daemon化的正确做法
[原文地址:https://blog.ti-node.com/blog...] daemon 音标 : ['di:mən] , 中文含义为守护神或精灵的意思 . 其实它还有个意思 : 守护进程 . 守 ...
- composer 安装教程
https://getcomposer.org/download/ 邓士鹏 1.先检查php.ini是否开启ssl ;extension=php_openssl.dll 2. php -r &qu ...
- 洛谷 P1383 codevs 3333 高级打字机
题目描述 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能,那就是它具备撤销功能,厉害吧. 请为这种高级打字机设计一个程序,支持如下3种操作: 1.T x:在文章末尾打下一个小写字母x.(t ...
- cogs 983. [NOIP2003] 数字游戏
983. [NOIP2003] 数字游戏 ★☆ 输入文件:numgame.in 输出文件:numgame.out 简单对比时间限制:1 s 内存限制:128 MB 题目描述 丁丁最近沉 ...
- linux 线程切换效率与进程切换效率相差究竟有多大?
Author:DriverMonkey Mail:bookworepeng@Hotmail.com Phone:13410905075 QQ:196568501 Are Linux threads t ...