js自定义鼠标右键的实现原理及源码


Posted in Javascript onJune 23, 2014

今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理:

1、屏蔽右键默认事件;(一度我以为修改的就是默认事件)

2、对一个ul的隐藏;(这个我也曾迂腐的认为值得这样操作的都是div,汗)

3、对鼠标点击右键做出的响应,显示隐藏的ul;

4、鼠标重新点击后,ul重新被隐藏

这样来看的话,我们需要做的事情是不是就简单了很多,先上代码:

html部分

<ul id="testRight" style="width: 100px;background-color: yellow;position: absolute;z-index: 100;"> 
<li><a href="#">开始</a></li> 
<li><a href="#">暂停</a></li> 
<li><a href="#">拜拜</a></li> 
</ul>

javascript部分:

window.onload=function(){ 
var forRight=document.getElementById("testRight");//获取对象,现在太熟悉了 
forRight.style.display="none"; 
var title=forRight.getElementsByTagName("li"); 

for(var i=0;i<title.length;i++){ 
title[i].onmouseover=function(){ 
this.classname="active";//其实这里我们也可以调用其他事件吧 
}; 
title[i].onmouseout=function(){//这里也是鼠标的两个事件吧 
this.classname=""; 
}; 
} 

document.oncontextmenu=function(event){//这是实现的关键点 
var event=event||window.event;//这个都不是问题了吧 
forRight.style.display="block"; 
forRight.style.left=event.clientX+"px"; 
forRight.style.top=event.clientY+"px";//鼠标的坐标啊 
return false;//这里返回false就是为了屏蔽默认事件 
}; 
document.onclick=function(){//就是为了更形象的模仿啊 
forRight.style.display="none"; 
}; 
};

先来看今天记录的最关键的地方:document.oncontextmenu这个事件返回false的话就是屏蔽默认事件,如果我们其他都不写,只在这个事件里面写return,好像就下面这样

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

这样的话,再点击右键也不会出现任何响应了。然后返回来再看整个的事件应用,好像除了这个事件,其他的都是比较熟悉的事件了,可就是对事件的这种整合总是缺乏,关键还是思路是创意吧,不过先不管哪儿多了,先整吧,但求熟读三千首,不求写来只问吟。扎马步,扎马步,扎马步.....

Javascript 相关文章推荐
js禁止回车提交表单的示例代码
Dec 23 Javascript
Javascript中replace()小结
Sep 30 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
js中常用的Math方法总结
Jan 12 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
Element Input组件分析小结
Oct 11 Javascript
Three.JS实现三维场景
Dec 30 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 #Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 #Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 #Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 #Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 #Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 #Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 #Javascript
You might like
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php截取字符串函数分享
2015/02/02 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
微信小程序实现留言板功能
2018/11/02 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
用Python设计一个经典小游戏
2017/05/15 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
快速了解Python中的装饰器
2018/01/11 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
c语言常见笔试题总结
2016/09/05 面试题
高中军训感言500字
2014/02/24 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis