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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 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
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
windows下安装nodejs及框架express
2015/08/07 NodeJs
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
ant design实现圈选功能
2019/12/17 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
python实现简单名片管理系统
2018/11/30 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
实例讲解Python3中abs()函数
2019/02/19 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
PyTorch中的C++扩展实现
2020/04/02 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
应付会计岗位职责
2013/12/12 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
安全教育片观后感
2015/06/17 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
vue实现锚点定位功能
2021/06/29 Vue.js
宝塔更新Python及Flask项目的部署
2022/04/11 Python