JavaScript常见鼠标事件与用法分析

本文通过具体实例介绍JavaScript中常用的鼠标事件及其使用方法，供读者参考学习。

JavaScript鼠标事件类型与触发顺序

JavaScript中主要包含以下8种鼠标事件类型。

mousedown：表示鼠标按键被按下的状态。

mouseup：表示鼠标按键被释放或弹起的状态。

click：表示鼠标左键（或中键）完成了一次单击操作。

上述事件的触发顺序依次为：mousedown -> mouseup -> click。

dblclick：表示鼠标左键（或中键）完成了双击操作。

双击事件的触发顺序为：mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick。

contextmenu：用于弹出右键菜单，该事件可能由鼠标右键触发，也可能由键盘上的菜单键触发。

mouseover：表示鼠标指针移动到目标元素上方。

mouseout：表示鼠标指针从目标元素上方移开。

mousemove：表示鼠标指针在目标元素上方持续移动。

需要注意的是，事件名称严格区分大小写。若要监听上述事件，需在事件名称前添加“on”前缀。

鼠标事件行为区别：mouseover与mouseenter

不同鼠标事件在行为上存在区别。

onmouseover和onmouseout：当鼠标移动到元素自身时触发事件，且当鼠标移动到其子元素上时也会触发该事件。

onmouseenter和onmouseleave：当鼠标移动到元素自身时触发事件，但当鼠标移动到其子元素上时不会触发该事件。

全局Event对象属性详解

全局事件对象event用于获取事件相关信息。

event.x：记录事件发生时鼠标的水平位置坐标。

event.y：记录事件发生时鼠标的垂直位置坐标。

button：标识触发事件的鼠标按键类型。

数值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代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，运行结果如图所示。

感兴趣的朋友可以使用本站在线工具测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。