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

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

鼠标左键

鼠标中键

鼠标右键

<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代码运行结果

巴特西

JavaScript鼠标事件

事件区别

最新文章

热门文章