鼠标事件-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  如下:

鼠标事件-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:事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标、垂直坐标,此时的参照点也就是原点是屏幕的左上角。

好吧,文字叙述总归是很烦,上个经典的图,解释一切 :

鼠标事件-MouseEvent

 

(完)

 

 

 

转载于:https://www.cnblogs.com/hanguozhi/p/7382719.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108229.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 集合类型python_python编程例子

    集合类型python_python编程例子集合集合的特点:是一种可迭代的、无序的、不能包含重复元素的数据结构去重b=[10,5,6,1,9,1]c=set(b)print(c)>>>{1,5

    2022年7月28日
    5
  • 浅解ARC中的 __bridge、__bridge_retained和__bridge_transfer

    浅解ARC中的 __bridge、__bridge_retained和__bridge_transfer

    2022年1月23日
    39
  • iterator的用法_名词所有格的用法整理初一

    iterator的用法_名词所有格的用法整理初一@Overrideprotectedvoidreduce(Textkey,Iterable<IntWritable>values,Contextcontext)throwsIOException,InterruptedException{intcount=0;Iterator<IntWritable>iterator=values.iterator();//<1,1,1>

    2022年10月24日
    0
  • 亚马逊服务器购买_电商平台用什么服务器

    亚马逊服务器购买_电商平台用什么服务器Siteground主机空间怎么样?很多国内的小伙伴可能对siteground主机空间比较陌生,感觉不如bluehost或者Godaddy名气大,实际上siteground在国外是一家非常有名气和实力的美国主机服务商,也是wordpress、Drupal、Jommla这三家知名建站程序一致推荐的主机商。我们蓝鲨网络使用siteground也好多年,最近几年也有非常多的客户选购了他家的主机,这几年使用下来最明显的感觉就是稳定、速度快、客服解决问题的技术水平都比较高。siteground套餐配置区别首先

    2022年9月25日
    0
  • sqlserver简便创建用户并授权

    sqlserver简便创建用户并授权

    2021年11月27日
    42
  • ajax跨域解决方案_java如何解决跨域问题

    ajax跨域解决方案_java如何解决跨域问题答案:只需要点击标题下面的蓝色字【web前端开发】关注即可。前言从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下。个人见识有限,如有差错,请多多见谅,欢迎提出issue,另外看到这个标题,请勿喷~题纲关于跨域,有N种类型,本文只专注于ajax请求跨域(ajax跨域只是属于浏览器”同源策略”中的一部分,其它的还有Cookie跨域iframe跨域,Loc

    2022年8月24日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号