oncontextmune事件
当用户在某元素上点击鼠标右键时触发此事件。
如何获取鼠标位置
当用户点击某元素，并触发某个鼠标事件时，可以根据该事件对象的信息获取鼠标的位置。鼠标在该元素内容区域的坐标
- 横向：clientX
- 纵向：clientY
eg：
someEle.addEventLisntener('click',function(event){
let mouseIndexX = event.clientX; //鼠标横向位置
let mouseIndexY = event.clientY; //鼠标纵向位置
});
如何实现页面屏蔽右键菜单
在讲实现方法前，先了解一下事件的捕获和冒泡
1.事件冒泡
事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点（文档）
eg：比如有当前这个DOM结构
document
html
body
div
如果你点击了<div>元素，那这个click事件会按照下面的顺序传播：
div > body > html > document
也就是说，click事件首先在<div>元素上发生，然后，click事件沿Dom树向上传播，在每一级节点上都会发生，直至传到document对象（即不单单<div>元素绑定的click事件会被触发，如果<body>元素也绑定了click事件，那也会被触发。利用此特性，可以实现事件委托（事件代理））
2.事件捕获
事件捕获的思想跟事件冒泡相反。即不太具体的节点更早接收到事件，而最具体的节点应该最后接受事件。
如果以前面的dom结构为例，则事件传播的走向如下
document > html > body > div
3.addEventListener（）函数
一般浏览器都是使用事件冒泡（默认）
当然我们也可以更改事件的传播顺序，不过要使用addEventListener这个方法为元素添加事件。
addEventListener函数有三个参数
参1：事件名称，参2：事件函数
参3：true || false
true：表示在捕获阶段调用事件处理程序
false：表示在冒泡阶段调用事件处理程序
使用addEventListener函数的好处是可以为元素添加多个事件处理程序（可同名），触发事件时，按添加的顺序执行
4.阻止事件
-
preventDefault
阻止DOM元素的默认行为，例如阻止表单type="submit"的button或input的提交表单行为。 -
stopPropagation
阻止事件的继续传播（冒泡） -
stopImmediatePropagation
阻止其他事件处理函数执行，并也会阻止事件的传播。
stopPropagation和stopImmediatePropagation的区别：
前者阻止事件继续向上传播，但不阻止同类型事件的执行，比如
someEle.addEventListener('click',function(event){
console.log('hello world');
event.stopProgagation();
});
someEle.addEventListener('click',function(){
console.log('你好');
}
// hello world
// 你好
在 click 事件绑定的第一个函数中，调用了stopPropagation(),这样会阻止事件继续向上冒泡，即该元素的父级和祖先元素的click不会被执行，但是该元素的click事件绑定的第二个函数，则会执行。
如果使用
event.stopImmediatePropagation();
// hello world
那除了事件不会向上冒泡之外，在调用了这个方法的函数中的后面绑定的函数也不会执行
解决方法
绕了一圈回来，现在终于可以来了解一下解决方法了。
其实如果看了上面的内容，相信大家都应该知道怎么解决了
没错，其实就一行代码
event.preventDefault()
只要阻止dom元素的默认行为即可。右键单击网页一般会有默认的菜单栏弹出，只要阻止了它的默认行为就解决了这个问题。
其他知识(css属性)
1.visibility
visibility：visible || hidden || collapse || inherit
visible（默认值：可见的）inherit（继承父级visibility属性）
hidden（隐藏）：使用该属性的元素在页面中不可见，但是还占据相应的文档布局
collapse（？？）用于隐藏表格，可删除一行或者一列，删除后影响表格布局。当不用于表格时，作用等同于hidden？
visibility对比display
两者都有隐藏元素的作用，不同的是，前者元素隐藏后，还占据着原来的文档位置。后者隐藏后，该元素直接从文档中消失。
JS与visibility
在元素应用了visibility：hidden属性隐藏后，该元素就不接受js效果了。
这个不接受JS效果指的是：js为该元素添加的事件，比如click、mousemove等事件不起作用。就你点击那个相应的位置或者其他操作，原本设定的效果都不会出来。但是还是能通过JS将这个元素进行位移、变色等其他操作的，即使hidden了！
还有其他该知识点请看
深入理解CSS元素visibility
2.元素的宽高：
- offsetWidth和offsetHeight
eg : offsetWidth = width + padding + border
style.width也是当前对象的宽度(width+padding+border)。
区别：
1)style.width返回值除了数字外还带有单位px；
2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小， style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；
3)如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串； - scrollWidth 和 scrollHeight
获取对象的滚动宽/高度 - clientWidth 和 clientHeight
获取对象内容的宽高，包括padding，不包括border的宽高
3.鼠标指针位置：
screenX/Y: 参照点也就是原点是整个屏幕的左上角，不限于浏览器内。
clientX/Y: 参照点是浏览器内容区域的左上角（浏览器显示区域的左上角），该参照点会随之滚动条的移动而移动。
pageX/Y：参照点也是浏览器内容区域的左上角（整个页面的左上角），但它不会随着滚动条而变动
网友评论