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


Posted in Javascript onJanuary 03, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码,得到如下运行结果:

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

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

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

Javascript 相关文章推荐
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 #Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 #Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 #Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 #Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 #Javascript
发布一款npm包帮助理解npm的使用
Jan 03 #Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 #Javascript
You might like
Smarty安装配置方法
2008/04/10 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
理解python正则表达式
2016/01/15 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
pycharm设置注释颜色的方法
2018/05/23 Python
python 实现屏幕录制示例
2019/12/23 Python
零基础学python应该从哪里入手
2020/08/11 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
英语翻译系毕业生求职信
2013/09/29 职场文书
铁路工务反思材料
2014/02/07 职场文书
社会工作专业求职信
2014/07/15 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书