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调用Java方法并互相传参的简单实例

    Js调用Java方法并互相传参的简单实例

    下面小编就为大家带来一篇Js调用Java方法并互相传参的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript 乱码问题

    JavaScript 乱码问题

    在用js写网页时,如果html等内容全部用document.write输出,包括<html>、<meta等标签,当嵌套时,会出现输出内容为乱码的问题
    2009-08-08
  • 详解javascript appendChild()的完整功能

    详解javascript appendChild()的完整功能

    这篇文章主要介绍了详解javascript appendChild()的完整功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • js中自定义方法实现停留几秒sleep

    js中自定义方法实现停留几秒sleep

    js中不存在自带的sleep方法,要想休眠要自己定义个方法,需要的朋友可以参考下
    2014-07-07
  • Bootstrap实现下拉菜单多级联动

    Bootstrap实现下拉菜单多级联动

    这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单多级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 单击复制文字兼容各浏览器的完美解决方案

    单击复制文字兼容各浏览器的完美解决方案

    单击复制文字的js找了很久,由于之前没有接触过,完全不知道兼容ie及标准dom浏览器,不仅仅要通过js,而且需要flash的帮忙,下面与大家分享下具体的实现方法
    2013-07-07
  • 浅析javascript函数表达式

    浅析javascript函数表达式

    这篇文章主要向大家详细介绍了javascript函数表达式,帮助大家理解javascript函数表达式,感兴趣的朋友可以参考一下
    2016-02-02
  • canvas 画布在主流浏览器中的尺寸限制详细介绍

    canvas 画布在主流浏览器中的尺寸限制详细介绍

    这篇文章主要介绍了canvas 画布在主流浏览器中的尺寸限制详细介绍的相关资料,canvas在不同浏览器下面有不同的最大尺寸限制,这里测试下,需要的朋友可以参考下
    2016-12-12
  • JavaScript 判断一个对象{}是否为空对象的简单方法

    JavaScript 判断一个对象{}是否为空对象的简单方法

    下面小编就为大家带来一篇JavaScript 判断一个对象{}是否为空对象的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Bootstrap源码学习笔记之bootstrap进度条

    Bootstrap源码学习笔记之bootstrap进度条

    本文通过源码给大家解析bootstrap进度条样式,分为条纹进度条,动态条纹进度条,层叠进度条和带Label的进度条,下面通过代码给大家简单介绍下,感兴趣的朋友一起看看吧
    2016-12-12

最新评论