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

 更新时间:2019年01月03日 14:22:22   作者:司马懿字仲达   我要评论

这篇文章主要介绍了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即可。

事件区别

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

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

全局事件对象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代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码,得到如下运行结果:

 

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

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

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

相关文章

  • 利用JS自动打开页面上链接的实现代码

    利用JS自动打开页面上链接的实现代码

    今天经过测试,实现了利用JS来自动打开页面上的链接的功能,其实比较简单,就是在页面上把链接列表列出来,然后通过JQuery的相关控制,在框架页中把链接打开,具体能做什么用,大家自己想,哈哈。
    2011-09-09
  • 使用javaScript实现鼠标拖拽事件

    使用javaScript实现鼠标拖拽事件

    这篇文章主要为大家详细介绍了使用javaScript实现鼠标拖拽事件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • js中apply方法的使用详细解析

    js中apply方法的使用详细解析

    本文是对js中apply方法的使用进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript中使用webuploader实现上传视频功能(demo)

    JavaScript中使用webuploader实现上传视频功能(demo)

    这篇文章主要介绍了webuploader实现上传视频功能,通过本文给大家介绍了上传视频和上传图片的区别讲解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-04-04
  • 利用JavaScript实现拖拽改变元素大小

    利用JavaScript实现拖拽改变元素大小

    本文主要介绍了JavaScript实现拖拽改变元素大小的原理及具体实例分析,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • 输入框点击时边框变色效果的实现方法

    输入框点击时边框变色效果的实现方法

    下面小编就为大家带来一篇输入框点击时边框变色效果的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-12-12
  • JS实现的跨浏览器解析XML文件实例

    JS实现的跨浏览器解析XML文件实例

    这篇文章主要介绍了JS实现的跨浏览器解析XML文件的方法,结合实例形式分析了javascript基于ActiveXObject操作xml文件的加载与解析相关技巧,需要的朋友可以参考下
    2016-06-06
  • javascript给span标签赋值的方法

    javascript给span标签赋值的方法

    本篇文章通过两种方法给大家介绍js给span标签赋值的方法,两种方法都比较不错,特此分享给大家,供大家学习
    2015-11-11
  • BootStrap智能表单实战系列(三)分块表单配置详解

    BootStrap智能表单实战系列(三)分块表单配置详解

    这篇文章主要介绍了BootStrap智能表单实战系列(三)分块表单配置详解的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 详解JavaScript中的Unescape()和String() 函数

    详解JavaScript中的Unescape()和String() 函数

    这篇文章主要介绍了详解JavaScript中的unescape()和String() 函数,JavaScript unescape() 函数可对通过 escape() 编码的字符串进行解码,String() 函数把对象的值转换为字符串,对本文感兴趣的朋友一起学习吧
    2015-11-11

最新评论