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);
}

如果输入这些，控制台将打印出：