js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」MouseEvent的类别有以下:mousedown鼠标按下mouseup鼠标释放click左键单击dblclick左键双击mousemove鼠标移动mouseover鼠标经过mouseout鼠标滑出mouseenter鼠标进入mouseleave鼠标离开contextmenu右键菜单注意:执行顺序:mousedown—&g…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

MouseEvent的类别有以下:

  1. mousedown 鼠标按下
  2. mouseup 鼠标释放
  3. click 左键单击
  4. dblclick 左键双击
  5. mousemove 鼠标移动
  6. mouseover 鼠标经过
  7. mouseout 鼠标滑出
  8. mouseenter 鼠标进入
  9. mouseleave 鼠标离开
  10. contextmenu 右键菜单

注意:

  • 执行顺序:mousedown —> mouseup —> click
  • 区别:mouseover和mouseout子元素也会触发,可以冒泡触发
  • 区别:mouseenter和mouseleave是针对侦听的对象触发,阻止了冒泡

阻止鼠标的默认事件

  • e.preventDefault()
  • e.returnValue=false;//IE8 及以下兼容写法
  • return false;//IE兼容写法,只用作on事件阻止默认事件

去除单击右键菜单

document.body.addEventListener("contextmenu",clickHandler);
function clickHandler(e){ 
   
    e.preventDefault();//阻止事件默认行为
    console.log(e.type);
}

Jetbrains全家桶1年46,售后保障稳定

阻止图像默认拖拽

var img=document.querySelector("img");
img.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){ 
   
    e.preventDefault();
}

阻止文字的拖拽和选择

document.body.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){ 
   
    e.preventDefault();
}

阻止表单提交及重设

var bn=document.querySelector("[type=submit]");
bn.addEventListener("click",clickHandler);
function clickHandler(e){ 
   
    e.preventDefault();
}

//或者对form来写
var form=document.querySelector("form");
form.addEventListener("submit",submitHandler);
function submitHandler(e){ 
   
    e.preventDefault();
    //e.returnValue=false;//IE8 及以下兼容写法
} 

MouseEvent对象

打印出MouseEvent对象内容:

document.body.addEventListener("mousedown",clickHandler);
function clickHandler(e){ 
   
    console.log(e);
}

打印结果如下(只截取了部分内容):
MouseEvent对象

  • altKey ctrlKey shiftKey metaKey 是否按键点击
  • button buttons which用来判断是鼠标的哪个键操作的
    左键对应的值为 0、1、1
    中键对应的值为 1、4、2
    右键对应的值为 2、2、3
  • timeStamp 从页面打开开始到触发事件的时间

以下内容为坐标值的说明:

clientX和clientY与x,y

  • clientX和clientY与x,y一样的,都是客户区域坐标,指鼠标的坐标,以浏览器显示区域的左上角开始,x,y是新浏览器支持

以下截图打印的结果都是div2元素的左上顶点(从边框开始)的位置坐标。
clientX,clientY

offsetX,offsetY

  • offsetX,offsetY 针对目标元素的左上角坐标(e.target),下面截图中鼠标点击有误差,不影响结果。
    offsetX、offsetY

layerX,layerY

  • layerX,layerY 往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角

当元素及它的父级都没有定位属性时,以body的左上角为原点:
layerX、layerY
当元素的父级都有定位属性时,以父级的左上角为原点:
layerX、layerY
当元素自身有定位属性时,以自身的左上角为原点:
layerX、layerY

pageX, pageY

  • pageX, pageY相对页面左上角的距离
    pageX、pageY

screenX screenY

  • screenX screenY 相对屏幕左上角的位置
    screenX、screenY

总结:

  • clientX和clientY与x,y一样的,以浏览器显示区域的左上角开始,指鼠标的坐标。x,y是新浏览器支持
  • offsetX,offsetY,针对目标元素的左上角坐标,从padding开始。
  • layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角
  • pageX,pageY相对页面左上角的距离
  • screenX screenY 相对屏幕左上角的位置
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/210117.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java8 ConcurrentHashMap详解

    Java8 ConcurrentHashMap详解Java8ConcurrentHashMapJava7中实现的ConcurrentHashMap说实话还是比较复杂的,Java8对ConcurrentHashMap进行了比较大的改动。建议读者可以参考Java8中HashMap相对于Java7HashMap的改动,对于ConcurrentHashMap,Java8也引入了红黑树。说实话,Java8Concurrent

  • 基于Linux安装redis

    基于Linux安装redis一、下载redis压缩包进入redis官网https://download.redis.io/releases/选择要下载的版本将下载好的压缩包使用Xftp上传至Linux系统中或者直接在Linux中使用命令直接下载wgethttps://download.redis.io/releases/redis-4.0.0.tar.gz使用tar命令解压tarxzfredis-4.0.0.tar.gz二、安装redis进入redis文件夹中,使…

  • 远程调试部署在容器中的springboot项目「建议收藏」

    远程调试部署在容器中的springboot项目「建议收藏」问题:访问网站,会根据ip判断访客所处位置,但部分ip插入数据库失败。 以为是一次小问题,很快就解决了,没想到最终花了6个小时左右,才搞清楚。分析 :1、将本地程序跑起来,发现一切正常,可以插入到数据库。但问题在线上确实妥妥的出现的,而我现在日志级别是info,没有错误日志。所有准备Debug线上程序,之前只debug过使用基本的tomcat发布。而我现在的jar是使用docker构建的镜像,运行的镜像。 2、问题从线上转化到了,我需要远程debug线上程序发现问题,并将之解决。查各种资料,配置

  • mybatis的resultType integer(resultmap标签详解)

        在官方文档中对resultType做了如下介绍:从这条语句中返回的期望类型的类的完全限定名或别名。注意如果是集合情形,那应该是集合可以包含的类型,而不能是集合本身。使用resultType或resultMap,但不能同时使用。mybatis中resultType可选类型:1,java的基础类型及其包装类int,double和java.lang.Integer,java…

  • 安卓系统usb调试在哪_安卓手机的usb调试

    安卓系统usb调试在哪_安卓手机的usb调试Android手机USB调试在哪?安卓手机如何打开USB调试模式?如果我们要将安卓手机连接到电脑上,从而传输文件、下载应用或ROOT等,都需要打开手机的USB调试模式。安卓系统的版本有很多,它们的打开方法也各不相同,下面给大家介绍各版本安卓手机打开USB调试模式的方法。步骤方法:一、2.1—2.3.7系统打开方法1、点击手机-Menu键(菜单键),在弹出的菜单中选择设置(Setting),或在应…

  • 因果图与判定表法_因果图如何转换为判断表

    因果图与判定表法_因果图如何转换为判断表1、什么是因果图及判定表法?因果图是用图解的方法表示输入的各种组合关系,依据因果图写出判定表,从而设计相应的测试用例。它适合于检查程序输入条件的各种组合情况。例约束关系、组合关系。2、因果图之4种因果关系(注:0表示某状态不出现,1表示某状态出现)恒等:若c1是1,则e1也为1;否则e1为0非:若c1是1,则e1也为0;否则e1为1或:若…

发表回复

您的电子邮箱地址不会被公开。

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