js去掉瀏覽器右鍵點擊默認事件（+vue項目開啟右鍵行為）

js去掉瀏覽器右鍵點擊默認事件

1、阻止整個頁面所有的右擊事件

document.oncontextmenu = function(){
　　return false;
}

 

2、特定的區域/元素

document.getElementById("test").oncontextmenu = function(e){
　　return false;
}

 

3、去掉以后給需要的區塊加特定的事件

js:

document.getElementById("test").onmousedown = function(e){
　　if(e.button ==2){
　　　　alert("你點了右鍵");
　　}else if(e.button ==0){
　　　　alert("你點了左鍵");
　　}else if(e.button ==1){
　　　　alert("你點了滾輪");
　　}
}

jq:

$("#test").mousedown(function(e){
　　//doing
});

 

4、通過jq bind綁定和觸發

$('').bind("contextmenu",function (e){

　　　//doning

　　　return false;

});

$('').trigger('contextmenu');

 

Vue-阻止事件冒泡-開啟右鍵-鍵盤類事件

1、阻止事件冒泡

　　當點擊按鈕時，會觸發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>

2、阻止左鍵，開啟右鍵行為

　　按鈕的右鍵行為，vue事件。這里的prevent是關閉默認行為，相當於 傳個$event 然后 event.preventDefault()；

<button type="button" @contextmenu.prevent="show1()">按鈕</button>

3、鍵盤類事件

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

 

參考文章：https://www.cnblogs.com/zycbloger/p/5643122.html