JavaScript鼠标事件

JavaScript鼠标事件
mousedown

鼠标被按下。

mouseup

鼠标按钮被释放（抬起）。

click

鼠标左键（或中建）被单击。

事件触发顺序：mousedown>mouseup>click>dblclick

鼠标左键（或中建）被双击。

事件触发顺序是：mousedown>mouseup>click>mousedown>mouseup>click>dblclick.

contextmenu

弹出右键菜单，他可能是鼠标右键触发的，也可能是键盘的菜单键触发的。

mouseover

鼠标移动到目标上方。

mouseout

鼠标从目标上方移出。

mousemove

鼠标在目标上方移动

注意：事件名称大小写敏感。若需要监听以上事件，则在事件名前面加上on即可。

事件区别

onmouseover、nmouseout:鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave:鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

全局对象事件event

event.x

事件发生时鼠标的位置

event.y

事件发生时鼠标的位置

botton

鼠标的哪一个键触发的事件

0

鼠标左键

1

鼠标中键

2

鼠标右键
```
<html>
  <body>
    <script type="text/javascript">
      function appendText(str) {
        document.body.innerHTML += str + "<br/>";
      }
      document.onmousedown = function() {
        appendText("onmousedown");
        appendText("button = " + event.button);
        appendText("(x,y) = " + event.x + "," + event.y);
      }
      document.onmouseup = function() {
        appendText("onmouseup");
      }
      document.onclick = function() {
        appendText("onclick");
      }
      document.ondblclick = function() {
        appendText("ondblclick");
      }
      document.oncontextmenu = function() {
        appendText("oncontextmenu");
      }
      document.onmouseover = function() {
        appendText("onmouseover");
      }
      document.onmouseout = function() {
        appendText("onmouseout");
      }
      document.onmousemove = function() {
        appendText("mousemove");
      }

    </script>
  </body>
</html>
```
这里使用在线HTML/CSS/JavaScript代码运行结果
相关阅读:
PEnum_PackingCareType
threejs vector3叉积
 Pset_ActionRequest
Pset_ProjectOrderPurchaseOrder
Pset_ProjectOrderWorkOrder
PEnum_PriorityType
IfcPermitTypeEnum
Pset_ProjectOrderMoveOrder
IfcConstructionMaterialResourceTypeEnum
中国足球不是倒在了比分的输赢上而是倒在了没有拼搏精神和责任心上——要我说中国男足就是没救了
原文地址：https://www.cnblogs.com/Strong-stone/p/10396178.html

JavaScript鼠标事件

事件区别