2018-01-01

2018-01-01 本文已影响0人加加大叔

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：参照点也是浏览器内容区域的左上角（整个页面的左上角），但它不会随着滚动条而变动