本文实例讲述了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操作DOM技巧总结》,《JavaScript页面元素操作技巧总结》,《JavaScript事件相关操作与技巧大全》,《JavaScript查找算法技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。