一: 阻止事件冒泡


布局:

  • 当点击按钮时,会触发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-阻止事件冒泡-开启右键-键盘类事件的更多相关文章

  1. window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理

    window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理 写PC下拉菜单的时候,hover样式显示下拉菜单,可能会这样写 <li class="xb_li1" ...

  2. JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡

    对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...

  3. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

  4. JS事件冒泡机制和兼容性添加事件

    本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...

  5. js去掉浏览器右键点击默认事件(+vue项目开启右键行为)

    js去掉浏览器右键点击默认事件 1.阻止整个页面所有的右击事件 document.oncontextmenu = function(){ return false;} 2.特定的区域/元素 docum ...

  6. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  7. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  8. javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件

    1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...

  9. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

随机推荐

  1. day35-1 类的三大特性---继承,以及类的派生

    目录 类的继承 继承的特性 类的派生 类的组合 类的继承 继承是为了拿到父类的所有东西 继承的特性 减少代码的冗余 Python中父类和子类的对应关系是多对多 使用__bases__方法获取对象继承的 ...

  2. Day 23 类的继承,派生,组合,菱形继承,多态与多态性

    类的继承 继承是一种新建类的方式,新建的类称为子类,被继承的类称为父类 继承的特性是:子类会遗传父类的属性 继承是类与类之间的关系 为什么用继承 使用继承可以减少代码的冗余 对象的继承 python中 ...

  3. Lua的热更新学习笔记_01

    热更新的的实现方式 1.使用lua脚本编写游戏的UI或者其他的逻辑 2.使用C#的反射技术 3.使用C#Light AssetBundle是什么? 1.unity提供一个资源更新技术,就是通过Asse ...

  4. Git 基础教程 之 暂存区

    工作区(working directory),就是目录,例如:pythonwork 版本库(Repository),工作区有一个隐藏的目录 .git 就是Git的版本库. 版本库最重要的是称为stag ...

  5. ajax跨域 (转)

    题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器”同源策略”中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍), ...

  6. luogu P4238 多项式求逆 (模板题、FFT)

    手动博客搬家: 本文发表于20181125 13:21:46, 原地址https://blog.csdn.net/suncongbo/article/details/84485718 题目链接: ht ...

  7. Timus - 1209 - 1, 10, 100, 1000...

    先上题目: 1209. 1, 10, 100, 1000... Time limit: 1.0 secondMemory limit: 64 MB Let's consider an infinite ...

  8. [bzoj1861][Zjoi2006]Book 书架_非旋转Treap

    Book 书架 bzoj-1861 Zjoi-2006 题目大意:给你一个序列,支持:将指定编号的元素抽出,放到序列顶(底):将指定编号元素左右篡位:查询指定编号元素位置:查询指定数量位置元素编号. ...

  9. HDU 3662

    求的是凸包有多少个面. 注意,求的是面.这就需要把同一个面的三角形合并.只需判断两个三角形的法向量是否同向平行. /* 增量法求凸包.选取一个四面体,同时把它各面的方向向量向外,增加一个点时,若该点与 ...

  10. 多个线程作用于同一个runnable对象

    多个线程作用于同一个runnable对象 学习了:https://www.cnblogs.com/ligang305/archive/2012/08/10/2632126.html http://as ...