IFE糯米学院-自定义鼠标右键
来源:互联网 发布:php开源权限管理系统 编辑:程序博客网 时间:2024/04/28 00:48
任务目的
- 了解js中的oncontextmenu事件
- 了解如何获取鼠标位置
- 了解如何实现页面屏蔽右键菜单
任务要求
实现鼠标右击时,出现自定义菜单。点击非自定义菜单区域时,隐藏自定义菜单。参考样例(点击查看),实现页面开发,要求实现效果基本一致。
点击自定义菜单条目时,弹出菜单条目名称。
参考
oncontextmenu
event事件
思路 ps:代码真的是乱到眼瞎,哈哈,因为html结构不同,所以计算各种宽度的时候肯定也不一样
我的代码
- 第一步,取消默认的右键菜单: 对点击框,监听contextmenu事件,然后preventDefault()阻止默认行为。这里,其实时候冒泡到body,但是就算冒泡到body,也只会产生一个右键菜单,所以确实不会有两个菜单出现,但是讲道理哦,应该阻止事件冒泡。stopPropagation(),可以在body上绑定一个contextmenu事件弹出一个alert框来验证。
冒泡:即事件从点击的目标,一级一级的向上冒泡,到window
捕获:即事件从点击的最高一级元素,一级一级向下捕获,直到目标
添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。
第二步,实现自定义菜单的显示隐藏。用一个showMenu()还有hidden(),然后主要是要说一下,就是应该实现的是,除了右键目标区域,其他地方,不管是用左键还是右键,这个菜单都会消失,所以,我是用了很笨的方法,就是给document绑定了click事件,以及contextmenu事件,都要隐藏,由于window监听了click,所以就不用单独给目标区域绑定click了。
第三步:主要就是可视区宽度 鼠标位置 还有div离浏览器左边的距离,这个我的更复杂是因为由于我是相对于一个父元素定位,如果是相对于整个窗口定位,就要少考虑一点。
//父元素距离浏览器左边的距离var offsetL = father.offsetLeft;var offsetT = father.offsetTop;//鼠标当前位置var mouseLocaX = event.clientX;var mouseLocaY = event.clientY;//浏览器宽度var winWidth = document.body.clientWidth;var winHeight = document.body.clientHeight;showMenu(show, [mouseLocaX, mouseLocaY, offsetL, offsetT, winWidth, winHeight]);
大概就是你加我你减的判断,画个图就很好理解了。
(图片出处)[http://www.2cto.com/kf/201409/333401.html]
- offsetTop offsetLeft…div 的边距离浏览器可视区的距离。
//控制显隐var showMenu = function(obj) { obj.style.display = 'block'; //默认 obj.style.left = arguments[1][0] - arguments[1][2] + "px"; obj.style.top = arguments[1][1] - arguments[1][3] + "px"; //显示在右边还是左边 if(arguments[1][4] - arguments[1][0] > 100) { obj.style.left = arguments[1][0] - arguments[1][2] + "px"; }else { obj.style.left = arguments[1][0] - arguments[1][2] - 100 + "px"; } //显示在下边还是上边 if(arguments[1][5] - arguments[1][1] > 90) { obj.style.top = arguments[1][1] - arguments[1][3] + "px"; }else { obj.style.top = arguments[1][1] - arguments[1][3] - 90 + "px"; }}
这里看起来很复杂比较不干净,参考别人有一种写法就是,用if和else+switch来控制。相当于拼凑一个字符串,然后用switch来控制
- IFE糯米学院-自定义鼠标右键
- ife系列之自定义鼠标右键菜单
- IFE糯米学院-正则表达式入门
- IFE糯米学院-checkbox和radio样式的美化实现
- IFE糯米学院-Vue动态数据绑定(一)
- web鼠标右键自定义
- 自定义鼠标右键
- Flex自定义鼠标右键
- 百度IFE学院
- 自定义 IE 鼠标右键弹出式
- 如何自定义更改鼠标右键...
- JS自定义鼠标右键内容
- 自定义 IE 鼠标右键弹出式
- svg鼠标右键菜单自定义
- 自定义右击鼠标右键
- jQuery 自定义鼠标右键菜单
- js自定义鼠标右键菜单
- 百度IFE前端学院小记
- Bellman-Ford -解决负权边
- 梦想
- 字符串和char数组的相互转换
- 从尾到头打印链表
- 项目与项目管理概述
- IFE糯米学院-自定义鼠标右键
- Codeforces 496D
- 算法作业_2(2017.3.2第二周)
- 理解Ionic 2之import
- cuda实践-2
- HID报告
- as的断点调试与高级断点调试
- Codeforces 466B Wonder Room【思维+暴力枚举】直觉题
- Java 五种类实例化的方法与初始化顺序