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

  

本文实例讲述了JavaScript常见鼠标事件与用法。分享给大家供大家参考,具体如下:

  

  


  鼠标的键钮被按下。

  


  鼠标的键钮释放弹起。

  


  鼠标左键(或中键)被单击。

  

事件触发顺序是:mousedown→mouseup→点击

  


  鼠标左键(或中键)被双击。

  

事件触发顺序是:mousedown→mouseup→点击→mousedown→mouseup→点击→双击.

  


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

  


  鼠标移动到目标上方。

  


  鼠标从目标上方移出。

  


  鼠标在目标上方移动

  

注意:事件名称大小写敏感。若需要监听以上事件,则在事件名的前面加个上即可。

  

  

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

  

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

  

  


  事件发生时鼠标的位置

  


  事件发生时鼠标的位置

  


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

  

0
  鼠标左键
  1
  鼠标中键
  2
  鼠标右键

  

        & lt; html>   & lt; body>   & lt;脚本type=" text/javascript祝辞   函数追加文本(str) {   document.body。innerHTML +=str +“& lt; br/祝辞”;   }   文档。onmousedown=function () {   追加文本(“onmousedown”);   追加文本(”按钮=" + event.button);   追加文本(“(x, y)=" +事件。x +”、“+ event.y);   }   文档。onmouseup=function () {   追加文本(“onmouseup”);   }   文档。onclick=function () {   追加文本(onclick ");   }   文档。ondblclick=function () {   追加文本(“ondblclick”);   }   文档。oncontextmenu事件=function () {   追加文本(“oncontextmenu事件”);   }   文档。onmouseover=function () {   追加文本(“onmouseover”);   }   文档。onmouseout=function () {   追加文本(“onmouseout”);   }   文档。onmousemove=function () {   追加文本(“mousemove”);   }   & lt;/script>   & lt;/body>   & lt;/html>      

这里使用:http://tools.jb51.net/code/HtmlJsRun测试上述代码,得到如下运行结果:

  

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

  

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

  

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

  

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

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