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 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
Python实现分割文件及合并文件的方法
2015/07/10 Python
实现Python与STM32通信方式
2019/12/18 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
物流专业大学的自我评价
2014/01/11 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
数学系毕业生求职信
2014/05/29 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
运动会观后感
2015/06/09 职场文书