JavaScript 鼠标事件(MouseEvent)案例讲解
更新时间：2021年08月19日 17:06:43 作者：寒玉知
这篇文章主要介绍了JavaScript 鼠标事件(MouseEvent)案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
鼠标事件-MouseEvent
当鼠标进行某种操作时，就会生成一个event对象，该对象记录着鼠标触发事件时的所有属性。
可以通过如下方法在google控制台打印出 MouseEvent 对象。
function mouseDown(e){
var e = e||event;
console.log(e)
}
window.onload = function (){
document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}
打印出来的 MouseEvent 如下：
该对象属性很多，但最常用的 不过 offsetX、offsetY、clientX/clientY、pageX、pageY。各个属性对应的是什么呢？
下面列出一下常用的事件
altkey ： 触发鼠标事件时是否alt 按键被按下,如果按下，则返回true，否则返回 fasle。
button: 事件属性返回一个阿拉伯数字 ， 0代表 按下 左键 ，1 代表按下 滚轮 ，2 代表按下 右键。
offsetX、offsetY ：事件属性返回触发事件时 鼠标相对于事件源元素 的X,Y坐标，标准事件没有对应的属性。
clientX、clientY ： 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标、垂直坐标。
pageX、pageY：事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标、垂直坐标。
screenX、screenY：事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标、垂直坐标，此时的参照点也就是原点是屏幕的左上角。
好吧，文字叙述总归是很烦，上个经典的图，解释一切 ：
到此这篇关于JavaScript 鼠标事件(MouseEvent)案例讲解的文章就介绍到这了,更多相关JavaScript 鼠标事件(MouseEvent)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
习.net已经近2年了，最近学习Ajax时发现自己的很多技术功底很是欠缺，比如JavaScript。今后我会将我正在学习的也写成笔记，有时间的话将以前的东西整理整理也传上来。2010-03-03
MyBatis是一款一流的支持自定义SQL、存储过程和高级映射的持久化框架。MyBatis几乎消除了所有的JDBC代码，也基本不需要手工去 设置参数和获取检索结果,对MyBatis感兴趣的小伙伴们可以参考一下2015-09-09
在用户体验过程中可能会出现这样的情况：自定义打开新窗口的样式,本文将介绍详细的解决方法，需要了解的朋友可以参考下2012-12-12
有时变量多写起来真的很麻烦，很多繁琐的差不多的重复工作，es6为我们提供了多种更加便利的声明变量的形式——变量的解构赋值。下面这篇文章主要介绍了ES6中变量解构赋值的相关资料，需要的朋友可以参考下。2017-02-02
javascript循环数组内所有元素代码学习，大家参考使用吧2013-12-12
这篇文章主要为大家介绍了JavaScript变量提升Hoisting机制实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-11-11
js对文字进行编码涉及3个函数：escape,encodeURI，encodeURIComponent，另外还有相对应的解码函数，本文对编码及解决函数坐下介绍，感兴趣的朋友可以参考下2013-09-09
推荐一些非常不错的javascript学习资源站点...2007-08-08
这篇文章主要介绍了JavaScript function函数种类，包括普通函数、匿名函数、闭包函数、十分的全面，并附上了示例，这里推荐给大家，希望对大家能有所帮助。2014-12-12
对于页面的一些坐标与位置分析，一般需要控制层的位置的朋友有帮助。需要的朋友可以参考下。2010-01-01
最新评论