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 权威指南(第四版) 读书笔记
Aug 11 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
微信小程序实现点击页面出现文字
Sep 21 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
重置版战役片段
2020/04/09 魔兽争霸
substr()函数中文版
2006/10/09 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Django自定义manage命令实例代码
2018/02/11 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
科技节口号
2014/06/19 职场文书
面试自我评价范文
2014/09/17 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers