前言
2017-百度前端技术学院编码任务：自定义网页右键菜单
任务目的
- 了解js中的oncontextmenu事件
- 了解如何获取鼠标位置
- 了解如何实现页面屏蔽右键菜单
大致效果
任务描述
- 实现鼠标右击时，出现自定义菜单。点击非自定义菜单区域时，隐藏自定义菜单。参考样例（点击查看）
- 实现页面开发，要求实现效果基本一致。
- 点击自定义菜单条目时，弹出菜单条目名称。
实现
1- js中的oncontextmenu事件
oncontextmenu事件属于鼠标事件类型，在元素中用户右击鼠标时触发并打开上下文菜单。事件属于DOM对象，是和文档交互主要方式。
2- 获取鼠标位置
当我们触发事件的时候，函数会返回一个事件对象，其中就有关于鼠标位置的属性，并且这些属性都是只读属性。
- event.clientX、event.clientY
返回事件触发时鼠标相对于元素视口的X或者Y坐标，这里元素视口是指浏览器窗口，可视区域不包括工具栏和滚动条，并且是以浏览器左上角为基点来计算长度。
这是W3C认可的标准，IE事件和标准事件都定义了这2个属性。
- event.screenX、event.screenY
返回事件触发时鼠标相对于屏幕 的X或者Y坐标，这个很好理解就是相对设备屏幕的距离，同样是左上角作为基点计算长度。
这是W3C认可的标准，IE事件和标准事件都定义了这2个属性。
- event.pageX、event.pageY
返回事件触发时鼠标相对于文档 的X或者Y坐标，这里的文档可以理解为document，它们使用的是文档坐标而非窗口坐标，所以包括滚动的距离。
这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
- event.offsetX、event.offsetY
返回事件触发时鼠标相对于事件指向元素 的X坐标，这里的距离坐标是相对触发事件的元素而言的。
假设有一个元素<p>test</p>当鼠标进入元素中触发事件时这是offsetX指的就是鼠标到P元素左边的距离。
但是这个属性并不是标准属性，因此IE和chrome对这个属性的支持并不一样。在chrome中offsetX和offsetY的值均为整数，而在IE中值为小数形式，并且如果元素有border属性也会影响到offsetY的计算。
还是图片直观
另外
DOM对象会返回元素对象的长宽数据
- clientWidth
元素内容+内边距
元素内容的可视宽度（不包括边框，边距或滚动条）
- offsetWidth
元素内容+内边距+边框
元素的宽度，包括边框
3 - 实现页面屏蔽右键菜单
通过事件阻止来达到屏蔽右键菜单
事件阻止有三个方法： preventDefault，stopPropagation，stopImmediatePropagation。
- preventDefault
简单理解取消事件的默认行为，前提是DOM对象cancelable属性为true。
你可以查看 event.cancelable 属性来判断一个事件的默认动作是否可以被取消. 在cancelable属性为false的事件上调用 preventDefault 方法没有任何效果.
- stopPropagation
阻止捕获和冒泡阶段中当前事件的进一步传播。标准规定监听事件默认是冒泡模式
- stopImmediatePropagation
阻止调用相同事件的其他侦听器。
本身的事件传播被阻止，同时后续的相同类型事件监听函数也被阻止。
如果元素注册了相同类型事件的多个监听函数，那么触发事件将依次执行。但是如果遇到某个监听函数执行event.stopImmediatePropagation()方法，则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
参考链接
网友评论