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

js去掉浏览器右键点击默认事件(+vue项目开启右键行为)的更多相关文章

  1. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  2. c#控制IE浏览器自动点击等事件WebBrowser,mshtml.IHTMLDocument2 .

    // c#控制IE浏览器自动点击等事件WebBrowser,mshtml.IHTMLDocument2 分类: c# 2013-02-06 15:18 3008人阅读 评论(0) 收藏 举报 可以实现 ...

  3. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  4. js屏蔽浏览器(IE和FireFox)的刷新和右键等功能

    //一.js屏蔽浏览器(IE和FireFox)的刷新功能 document.onkeydown=function() { if ((window.event.keyCode==116)|| //屏蔽 ...

  5. js 去掉浏览器右击默认事件

    1.整个页面所有的右击事件 document.oncontextmenu = function(){ return false; } 2.特定的区域 document.getElementById(& ...

  6. JS判断浏览器是否支持触屏事件

    var hasTouch=function(){ var touchObj={}; touchObj.isSupportTouch = "ontouchend" in docume ...

  7. 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法

    首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...

  8. 阻止默认事件preventDefault与returnValue

    通过阻止默认事件,禁止鼠标右键的使用 document.getElementById('dd').oncontextmenu = function(ev){ event = ev || window. ...

  9. Python3 tkinter基础 Frame event.x 输出鼠标左右键点击的位置

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

随机推荐

  1. Luogu 4721 【模板】分治 FFT

    还不会这题的多项式求逆的算法. 发现每一项都是一个卷积的形式,那么我们可以使用$NTT$来加速,直接做是$O(n^2logn)$的,我们考虑如何加速转移. 可以采用$cdq$分治的思想,对于区间$[l ...

  2. VS code docker 调试 asp.net core

    前言 .net core的诞生就是为了解决跨平台的事情的,所以.net core app运行在linux.macOS.docker上也不是什么新鲜事了. 相信已经有不少.net core的项目已经部署 ...

  3. hibernate使用记录

    1.执行SQL语句而非hql语句,getSession().createQuery(sql2) 执行的是hibernate语句; Query query2 = this.onlineMonitorDa ...

  4. Html5-Video标签以及字幕subtitles和captions的区别

    <video id="mainvideo" src="video.mp4" type="video/mp4"controls auto ...

  5. Razor内幕之解析

    ASPX语法比较简单,所以ASPX解析器几乎完全是通过正则表达式来实现的.Razor解析器与ASPX解析器之间有很大不同,它实际上分为三个独立的组件: 1)理解基础HTML语法的标记解析器: 2)理解 ...

  6. 【Head First Java 读书笔记】(五)编写程序

    第五章 编写程序 伪码:伪码能帮你专注于逻辑而不需要顾虑到程序语法 测试码:测试用的程序代码 真实码:实际代码 伪码 伪码是介于真正的java程序与正常英语之间的一种语言.伪码大致包括3部分:实例变量 ...

  7. [Lua快速了解一下]Lua运行

    -Lua的Hello World print("Hello World") 分号可选 -类似python,进入Lua后再shell中打命令执行语句也可 > print(&qu ...

  8. wpf 依赖属性注册解释

    这个解释的很明白了 http://www.cnblogs.com/xiongpq/archive/2010/06/29/1767905.html

  9. 如何为PAC运算设定请求集

    由于第一支PAC:定期请购成本处理程序 请求在运行过程中会自动提交 定期实际成本处理程序 请求,且 这两个请求不存在父子关系,导致 第二个请求尚未处理完成时 第一个请求已经运行完成,这就导致在设定请求 ...

  10. Sharepoint2013搜索学习笔记之搜索构架简单概述(一)

    Sharepoint搜索引擎主要由6种组件构成,他们分别是爬网组件,内容处理组件,分析处理组件,索引组件,查询处理组件,搜索管理组件.可以将这6种组件分别部署到Sharepoint场内的多个服务器上, ...