微信小程序卖货_JavaScript常见鼠标工作与用法分析

摘要: JavaScript普遍电脑鼠标恶性事件与使用方法剖析 本文关键详细介绍了JavaScript普遍电脑鼠标恶性事件与使用方法,融合案例方式比较详尽的剖析了javascript 8种普遍的电脑鼠标恶性事件...

JavaScript常见鼠标事件与用法分析       这篇文章主要介绍了JavaScript常见鼠标事件与用法,结合实例形式较为详细的分析了javascript 8种常见的鼠标事件与相关使用技巧,需要的朋友可以参考下

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

JavaScript 鼠标事件有以下8种

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
事件发生时鼠标的位置

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代码运行工具:测试上述代码,得到如下运行结果:

 

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:模板小程序