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 相关文章推荐
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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中return的用法实例分析
2015/02/28 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
jQuery live
2009/05/15 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
深圳茁壮笔试题
2015/05/28 面试题
数控技术专科生自我评价
2014/01/08 职场文书
机械个人求职信范文
2014/01/24 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
班主任寄语2015
2015/02/26 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
南京大屠杀观后感
2015/06/02 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis