Javascript和jquery事件--鼠标右键事件，contextmenu
右键点击触发是浏览器的默认菜单事件contextmenu，你可以选择阻止它，使用event.preventDefault();或者return false;。
想要定义右键点击事件，关注的是mouseup或者mousedown事件，使用event获取点击的键：
Js中使用event. button---0,1,2分别是左键、滚轮、右键
Jq中使用event.which---1,2,3分别是左键、滚轮、右键
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<title>鼠标事件</title>
<script src='/static/Lib/jquery/jquery-3.3.1.min.js'></script>
<script src='js/jquery-3.3.1.min.js'></script>
<style>
#f1{
padding:10px;
background:black;
}
#f2{
padding:10px;
background:red;
}
#f3{
padding:10px;
}
#test{
background:black;
color:white;
padding:2px;
}
</style>
</head>
<body>
<div id="f1">
<button id="button1">javascript</button>
</div>
<div id="f2">
<button id="button2">jquery</button>
</div>
<div id='f3'><a href="worker.js" target="_blank" id='test'><span></span>超链接</a></div>
<script type="text/javascript">
function say(){
alert(this.innerHTML);
}
window.onload= function(){
//实现右键单击事件
//js
//关闭鼠标右键默认事件
document.getElementById("button1").oncontextmenu = function(e){
e.preventDefault();
};
//设置鼠标按键事件
document.getElementById("button1").onmousedown = function(e){
if(e.button ==2){
console.log("你点了右键");
}else if(e.button ==0){
console.log("你点了左键");
}else if(e.button ==1){
console.log("你点了滚轮");
}
}
//jq
//关闭鼠标右键默认事件
$('#button2').bind("contextmenu", function(){
return false;
});
//设置鼠标按键事件
$('#button2').on('mousedown', function(e){
if (1 == e.which) {
console.log("你点了左键");
} else if (2 == e.which) {
console.log("你点了滚轮");
} else if (3 == e.which) {
console.log("你点了右键");
}
}); }; </script>
</body>
</html>
示例html和js代码
https://www.cnblogs.com/chenluomenggongzi/p/5777545.html
https://blog.csdn.net/u014291497/article/details/52267604
Javascript和jquery事件--鼠标右键事件，contextmenu的更多相关文章
- Unity 添加鼠标右键事件
把此类放到 Editor下使用就OK using UnityEngine; using System.Collections; using System.Collections.Generic; us ...
- ExtJS配置TabPanel的鼠标右键菜单(ContextMenu)功能
更新记录 2022年6月14日 发布. 2022年6月13日 初稿. TabPanel的鼠标右键菜单(ContextMenu)功能介绍 开源的TabPanel组件很少做到拖拽调整tab顺序功能的,支持 ...
- javascript 处理鼠标右键事件
使用右键事件 在需要右键的地方加上 onmousedown="if(event.button == 2) alert('点击右键了!');即可 不经意地被一位同事问起在javascri ...
- jquery鼠标右键事件
$('body').live("mousedown",function(e){ $('body').bind("contextmenu",function(e) ...
- jquery 鼠标右键事件、左键单击事件判定
$(function(){ $('a').mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 retu ...
- JavaScript与jQuery关于鼠标点击事件
即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...
- 【javascript】jQuery判断用户右击事件
jquery 判断用户是鼠标是右击还是左击, // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 $(document).mousedown(function(e) { if(3 ...
- html js 捕捉鼠标右键事件，按下滚轮事件，左键点击事件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- AngularJS实现鼠标右键事件
常规javascript鼠标右键直接在标签上加contextmenu="alert('a')"即可,现在angular通过directive来定义一个右键指令. app.direc ...
随机推荐
- 洛谷 P1719 最大加权矩形
P1719 最大加权矩形 题目描述 为了更好的备战NOIP2013,电脑组的几个女孩子LYQ,ZSC,ZHQ认为,我们不光需要机房,我们还需要运动,于是就决定找校长申请一块电脑组的课余运动场地,听说她 ...
- 设置select组件中的默认值
会员卡类型 <select id="name2" style="width:140px"> <option value="Ak& ...
- es64 const
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js---03属性操作
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- Nabou应用实例
本文接上文 <完整性检查工具Nabou> http://chenguang.blog.51cto.com/350944/280712650) this.width=650;" ...
- Android Retrofit+RxJava 优雅的处理服务器返回异常、错误
标签: 开始本博客之前,请先阅读: Retrofit请求数据对错误以及网络异常的处理 异常&错误 实际开发经常有这种情况,比如登录请求,接口返回的 信息包括请求返回的状态:失败还是成功,错误码 ...
- Android框架之路——OkGo的使用
一.简介 该库是封装了okhttp的标准RESTful风格的网络框架,可以与RxJava完美结合,比Retrofit更简单易用.支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数 ...
- 「HAOI2016」字符合并
「HAOI2016」字符合并 题意: 有一个长度为\(n\)的\(01\)串,你可以每次将相邻的\(k\)个字符合并,得到一个新的字符并获得一定分数.得到的新字符和分数由这\(k\)个字符确定.你 ...
- zabbix3.4.7搭建及邮件告警
Zabbix3.4.7部署 系统环境:CentOs7.2 1.关闭selinux 1.1 [root@localhost ~]# setenforce 0 #临时关闭 1.2 [root@localh ...
- Linux 创建新用户并添加到sudo用户组
附上一份相当奢华的文档: https://www.cnblogs.com/jxhd1/p/6528574.html 添加用户到组 usermod -a -G sudo newone