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

posted on   Strong-stone  阅读(295)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示