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 ...
随机推荐
- Android manifest文件中的标签详细介绍
官方文档 概要 每一个Android应用都应该包含一个manifest文件,即AndroidManifest.xml.它包含了程序运行的一些必备信息,比如:--为Java应用程序指定一个独一无二的名字 ...
- js防止提交数据之后的按钮连击
js防止提交数据之后的按钮连击 一.实例描述 当页面提交的数据特别多时,页面会反应比较迟钝,此时如果用户等不及而连续单击按钮,导致数据重复提交.本案例就是为了防止数据重复提交. 二.截图 三.代码 & ...
- js --- 事件冒泡 事件捕获
先上结论: 他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事 ...
- Yahoo!团队：网站性能优化的35条黄金守则(转)
Excetional Performance 团队总结出了一系列可以提高网站速度的方法.可以分为 7大类 35条.包括内容 .服务器 . CSS . JavaScript .Cookie .图片 .移 ...
- ASP.NET WebAPI RC 竟然不支持最常用的json传参
壮士断腕(WCF Web API),为的是 ASP.NET Web API 的横空出世,再加上它的开放(开源),于是对之产生了一点点痴情,并写下了HttpClient + ASP.NET Web AP ...
- java knowledge record
javax.accessibility.Accessible 给予private 或者 final 变量可以改变的机会
- ActiveMQ学习总结（7）——ActiveMQ使用场景
MQ简介: MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过写和检索出入列队的针对应用程序的数据(消息)来通信,而无需专用连接来链接它们.消息传 ...
- 中小型WEB系统权限日志数据表设计
中小型WEB系统权限日志数据表设计 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjc1MDU3OA==/font/5a6L5L2T/fontsi ...
- C语言编程入门——程序练习（下）
C语言的一些简单操作练习. 互换两个数字: # include <stdio.h> int main(void) { int i = 3; int j = 5; int t; //将i ...
- BZOJ 1027 JSOI2007 合金 计算几何+Floyd
题目大意:给定一些合金,选择最少的合金,使这些合金能够按比例合成要求的合金 首先这题的想法特别奇异 看这题干怎么会想到计算几何 并且计算几何又怎么会跟Floyd挂边 好强大 首先因为a+b+c=1 所 ...