2017IFE-自定义网页右键菜单

前言

2017-百度前端技术学院编码任务：自定义网页右键菜单

任务目的

• 了解js中的oncontextmenu事件
• 了解如何获取鼠标位置
• 了解如何实现页面屏蔽右键菜单

大致效果

任务描述

• 实现鼠标右击时，出现自定义菜单。点击非自定义菜单区域时，隐藏自定义菜单。参考样例（点击查看）
• 实现页面开发，要求实现效果基本一致。
• 点击自定义菜单条目时，弹出菜单条目名称。

DEMO

项目地址

实现

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坐标，这里的距离坐标是相对触发事件的元素而言的。

假设有一个元素

test

当鼠标进入元素中触发事件时这是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方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.

参考链接

1. oncontextmenu 事件

2. clientX/clientY 与 screenX/screenY 的区别

3. offsetheight height clientHeight outerHeight等的区别

4. event.preventDefault

5. event.stopPropagation

6. event.stopImmediatePropagation