首页 > 其他分享 >[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect

[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect

时间:2023-10-01 14:05:21浏览次数:42  
标签:clientX getBoundingClientRect 事件 坐标 IE event 属性


event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
getBoundingClientRect
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性;

[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect_javascript



参考:

图解 event.pageX event.clientX event.offsetX get BoundingClientRect


标签:clientX,getBoundingClientRect,事件,坐标,IE,event,属性
From: https://blog.51cto.com/u_12881709/7673847

相关文章

  • lesson8 输入框监控听 TestTextFieldActionEvent
       packagecom.zym.lesson8;importjava.awt.*;importjava.awt.event.ActionEvent;importjava.awt.event.ActionListener;importjava.awt.event.WindowAdapter;importjava.awt.event.WindowEvent;publicclassTestTextFieldActionEvent{publicstatic......
  • C#:Event
    事件原理事件:某些重要的发生的事情。角色:具备通知能力的类或对象。通知能力是事件发生的效果。使用:多个角色之间通过事件通知/响应进行信息传递。因此有效的事件都包含某些特定参数。C#将现实中的此类行为抽象为事件模型(EventModel)。事件行为与SomeIP的ServiceDiscovery服务发......
  • Logstash报错: Could not index event to Elasticsearch
    Logstash报错:CouldnotindexeventtoElasticsearch 一、环境说明Logstash7.3ElasticSearch7.3二、现象logstash/logs/logstash-plain.log大量警告:ValidationFailed:1:thisactionwouldadd[1]totalshards,butthisclustercurrentlyhas[1000]/[1000]maximum......
  • [LeetCode] 1353. Maximum Number of Events That Can Be Attended 最多可以参加的会
    Youaregivenanarrayof events where events[i]=[startDayi,endDayi].Everyevent i startsat startDayi andendsat endDayi.Youcanattendanevent i atanyday d where startTimei<=d<=endTimei.Youcanonlyattendoneeventatanytime ......
  • ManualResetEvent
    表示线程同步事件,收到信号时,必须手动重置该事件。此类不能被继承。  该示例以 ManualResetEvent 处于未对齐状态的开头,(即传递到 false 构造函数)。该示例创建三个线程,其中每个线程通过调用其 WaitOne 方法在上ManualResetEvent阻止。当用户按 Enter 键时,该......
  • AutoResetEvent
    表示线程同步事件在一个等待线程释放后收到信号时自动重置。此类不能被继承。以下示例演示如何在AutoResetEventSet每次用户按 Enter 键时调用基类上的方法()一次释放一个线程。该示例启动三个 AutoResetEvent 线程,等待在信号状态下创建的。第一个线程会立即释放,因为......
  • [IJCAI 2023]Preventing Attacks in Interbank Credit Rating with Selective-aware G
    [IJCAI2023]PreventingAttacksinInterbankCreditRatingwithSelective-awareGraphNeuralNetwork问题文章研究的是对银行间信用评价的攻击的预防。点是银行,边是银行间的借贷关系。攻击方式有特征攻击(改特征)和结构攻击(加边),目标是点预测。模型选择表示层通过伯努利......
  • angular event服务,不同组件间参数传递
    利用AngularEvent在不同组件之间传递数据为了实现在Angular不同Component之间相互传递数据,可以使用Event分发的思路来实现。使用事件实现在不同组件之前传递数据的思路如下:定义一个服务,用来实现事件的发布和订阅方法。组件A注入事件服务的依赖,将自己要传递数据的数据以事件的形式......
  • 使用CQRS和Event Sourcing实现高性能.NET应用程序
    摘要本文介绍了如何使用CQRS(命令查询职责分离)和EventSourcing在.NET应用程序中实现高性能和可扩展性。我们将在一个具体的业务场景中应用这些模式,以演示它们如何解决实际问题。引言随着业务的发展和用户需求的增加,我们作为.NET程序员需要考虑如何提高应用程序的性能和可扩展性......
  • e.preventdefault()别滥用
    有的时候我们会为事件回调函数添加一个参数(通常是e),并在函数中加入e.preventdefault();以取消默认行为。由于习惯,我顺手将它写到了一个checkbox的change事件中。由于不同的浏览器解释不同,在IE8上出现了一个bug:change事件能进入,但是UI显示上不能讲复选框的选中状态重绘。分析原因,是我......