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
js去掉浏览器右键点击默认事件(+vue项目开启右键行为)的更多相关文章
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
- c#控制IE浏览器自动点击等事件WebBrowser,mshtml.IHTMLDocument2 .
// c#控制IE浏览器自动点击等事件WebBrowser,mshtml.IHTMLDocument2 分类: c# 2013-02-06 15:18 3008人阅读 评论(0) 收藏 举报 可以实现 ...
- Node.js npm基础安装配置&创建第一个VUE项目
使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...
- js屏蔽浏览器(IE和FireFox)的刷新和右键等功能
//一.js屏蔽浏览器(IE和FireFox)的刷新功能 document.onkeydown=function() { if ((window.event.keyCode==116)|| //屏蔽 ...
- js 去掉浏览器右击默认事件
1.整个页面所有的右击事件 document.oncontextmenu = function(){ return false; } 2.特定的区域 document.getElementById(& ...
- JS判断浏览器是否支持触屏事件
var hasTouch=function(){ var touchObj={}; touchObj.isSupportTouch = "ontouchend" in docume ...
- 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
- 阻止默认事件preventDefault与returnValue
通过阻止默认事件,禁止鼠标右键的使用 document.getElementById('dd').oncontextmenu = function(ev){ event = ev || window. ...
- Python3 tkinter基础 Frame event.x 输出鼠标左右键点击的位置
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
随机推荐
- Luogu 4721 【模板】分治 FFT
还不会这题的多项式求逆的算法. 发现每一项都是一个卷积的形式,那么我们可以使用$NTT$来加速,直接做是$O(n^2logn)$的,我们考虑如何加速转移. 可以采用$cdq$分治的思想,对于区间$[l ...
- VS code docker 调试 asp.net core
前言 .net core的诞生就是为了解决跨平台的事情的,所以.net core app运行在linux.macOS.docker上也不是什么新鲜事了. 相信已经有不少.net core的项目已经部署 ...
- hibernate使用记录
1.执行SQL语句而非hql语句,getSession().createQuery(sql2) 执行的是hibernate语句; Query query2 = this.onlineMonitorDa ...
- Html5-Video标签以及字幕subtitles和captions的区别
<video id="mainvideo" src="video.mp4" type="video/mp4"controls auto ...
- Razor内幕之解析
ASPX语法比较简单,所以ASPX解析器几乎完全是通过正则表达式来实现的.Razor解析器与ASPX解析器之间有很大不同,它实际上分为三个独立的组件: 1)理解基础HTML语法的标记解析器: 2)理解 ...
- 【Head First Java 读书笔记】(五)编写程序
第五章 编写程序 伪码:伪码能帮你专注于逻辑而不需要顾虑到程序语法 测试码:测试用的程序代码 真实码:实际代码 伪码 伪码是介于真正的java程序与正常英语之间的一种语言.伪码大致包括3部分:实例变量 ...
- [Lua快速了解一下]Lua运行
-Lua的Hello World print("Hello World") 分号可选 -类似python,进入Lua后再shell中打命令执行语句也可 > print(&qu ...
- wpf 依赖属性注册解释
这个解释的很明白了 http://www.cnblogs.com/xiongpq/archive/2010/06/29/1767905.html
- 如何为PAC运算设定请求集
由于第一支PAC:定期请购成本处理程序 请求在运行过程中会自动提交 定期实际成本处理程序 请求,且 这两个请求不存在父子关系,导致 第二个请求尚未处理完成时 第一个请求已经运行完成,这就导致在设定请求 ...
- Sharepoint2013搜索学习笔记之搜索构架简单概述(一)
Sharepoint搜索引擎主要由6种组件构成,他们分别是爬网组件,内容处理组件,分析处理组件,索引组件,查询处理组件,搜索管理组件.可以将这6种组件分别部署到Sharepoint场内的多个服务器上, ...