鼠标相关知识补充

鼠标相关知识

pointer-events: auto; /* 默认 */
pointer-events: none;
auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

none——元素永远不会成为鼠标事件的target（目标）。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默认就可以穿透当前层，因为pointer-events默认为auto

cursor属性

default: 默认光标（通常是箭头）
pointer: 手形
crosshair: 十字
auto：默认。浏览器设置的光标
not-allowed：禁用

实现普通标签disabled效果

pointer-events: none;
cursor:not-allowed;

哪些标签具有disabled属性
input元素、button元素、option元素等都具有一个disabled属性

鼠标事件

事件	说明
click	单击鼠标左键
dblclick	双击鼠标左键
mousedown	单机任意一个鼠标按钮
mouseup	松开任意一个鼠标按钮时发生
mouseout	鼠标指针位于某个元素上，且将要溢出元素的边界时发生
mouseover	鼠标移出某个元素到另一个元素上时发生	鼠标在上面会一直触发
mousemove	鼠标在某个元素上时持续发生
mousenter	鼠标进入	只有鼠标进入触发一次
mouseleave	鼠标离开

鼠标事件属性

按下鼠标的是那个键

MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。
0代表左键
1代表中键
2代表右键

鼠标事件发生时，是否按下对应的键盘按键特殊键

返回一个布尔值

MouseEvent.altKey
MouseEvent.ctrlKey
MouseEvent.metaKey
MouseEvent.shiftKey

位置信息

这些都是只读属性

MouseEvent.clientX 属性返回鼠标位置相对于浏览器窗口左上角的水平坐标，
MouseEvent.clientY 属性返回鼠标位置相对于浏览器窗口左上角的垂直坐标

MouseEvent.offsetX 属性返回鼠标位置距离事件作用对象左侧边缘的水平距离，
MouseEvent.offsetY 属性返回鼠标位置距离事件作用对象左侧边缘的垂直距离，

e.screenX e.screenY 距离屏幕的水平和垂直距离