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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
JavaScript事件对象深入详解
Dec 30 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
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
python备份文件的脚本
2008/08/11 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python3调用R的示例代码
2018/02/23 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
政府信息公开实施方案
2014/05/09 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
Python实现仓库管理系统
2022/05/30 Python