鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

screenY

鼠标相对于显示器屏幕左上角的偏移

pageY

鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响)

IE9之下并不支持这个属性

但是可以写点代码计算出来。 jQuery中的实现：

代码如下:

// Calculate pageX/Y if missing and clientX/Y available
 if ( event.pageX == null && original.clientX != null ) {
     eventDoc = event.target.ownerDocument || document;
     doc = eventDoc.documentElement;
     body = eventDoc.body;
     event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft||body&&body.clientLeft || 0 );
     event.pageY = original.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );
 }

简单点实现就是。

鼠标相对于浏览器视口的偏移加上文档的滚动条隐藏的高度减去文档的clientTop.

代码如下:

var pageY = event.clientY +document.documentElement. scrollTop-document.documentElement.clientTop

为何要减去document.documentElement.clientTop

这是IE8之下浏览器特有的文档的偏移，即使设置html,body的padding和margin为0也不会影响其值。

在iE7下测试，得到

代码如下:

document.documentElement.clientTop --> 2px  document.documentElement.clientLeft --> 2px
 document.bocy.clientTop --> 0px  document.body.clientLeft --> 0px

clientY

鼠标相对于浏览器视口左上角的偏移

注意clientY和pageY的区别，clientY在页面无滚动条的情况下值等同于pageY

----------------------------------分割-----------------------------------------------

layerY

如果元素的position样式不是默认的static,我们说这个元素具有定位属性。

在当前触发鼠标事件的元素和它的祖先元素中找到最近的具有定位属性的元素，计算鼠标与其的偏移值，以找到元素的border的左上角的外交点作为相对点。如果找不到具有定位属性的元素，那么就相对于当前页面计算偏移，此时等同于pageY。

IE9之下并不支持这个属性，但是可以用其特有的offsetY替换

offsetY  

　　  IE专有的属性

offsetY和layerY的不同在于，前者的在计算偏移值时，相对于元素的border左上角的内交点，因此当鼠标位于元素的border上时，偏移值是一个负值。 另外offsetY并不在乎触发事件的元素是否有定位属性，它总是相对于触发事件的元素来计算偏移值。

　　   鉴于layerY和offsetY的不同，要兼容的使用二者要注意

　　1.触发事件的元素一定要设置定位属性。

　　 2.在元素具有上边框border-top的情况下， layerY比offsetY的值多一个border-top的宽度值。

代码如下:

//这里的element.borderTopWidth必须是实际计算出的元素的上边框宽度。
 var borderTopWidth =  window.getComputedStyle ? window.getComputedStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth;
 var offsetY = event.offsetY||(event.layerY + borderTopWidth);

通过layerY和offsetY属性，可以很方便的计算鼠标相对于绑定鼠标事件元素的偏移，这在某些时候非常有用。

这里详细说了鼠标竖直方向的偏移属性，水平方向的偏移类似,不再讨论。

以上就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • 关于window.pageYOffset和document.documentElement.scrollTop

    举个例子: Css:假定进行如下简单设置: html{height:1000px;} JS: 复制代码 代码如下: function(){ window.scrollBy(0,100); alert(window.pageYOffset); } Results: //点击一次后弹出:100;得出的是一个数值,read-only属性:value:Integer(整数),default:0; 附注:当滚动条到达页面最底部时,window.pageYOffset=1000-document.docum

  • js 鼠标点击事件及其它捕获

    <div><a href="#" onclick="showPricediv('aaa')" abc=1>adsfsdf</a></div> <div id="aaa" style="display:none" onmouseover="temshowTag=true" onmouseout="temshowTag=false">

  • CSS鼠标响应事件经过、移动、点击示例介绍

    几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触 复制代码 代码如下: <html> <head> <title>CSS 鼠标响应事件</title> <meta http-equiv="Content-Type" content="text

  • 为GridView的行添加鼠标经过、点击事件的小例子

    复制代码 代码如下: protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)    {        e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#95B8FF'");        e.Row.Attributes.Add(&

  • 使用JS或jQuery模拟鼠标点击a标签事件代码

    复制代码 代码如下: <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("alink").click(); //既触发了a标签的点击事件,又触发了页面跳转 把 &

  • js监听鼠标点击和键盘点击事件并自动跳转页面

    js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,

  • js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

    IE 左键是 window.event.button = 1 右键是 window.event.button = 2 中键是 window.event.button = 4 没有按键动作window.event.button = 0 Firefox 左键是 event.button = 0 右键是 event.button = 2 中键是 event.button = 1 没有按键动作 event.button = 0 Opera 7.23/7.54 鼠标左键是 window.event.but

  • 鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

    鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

    screenY 鼠标相对于显示器屏幕左上角的偏移 pageY 鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响) IE9之下并不支持这个属性 但是可以写点代码计算出来. jQuery中的实现: 复制代码 代码如下: // Calculate pageX/Y if missing and clientX/Y available  if ( event.pageX == null && original.clientX != null ) {      eventDoc = event.t

  • JavaScript 键盘事件的处理及属性详解

    目录 引言 处理键盘事件 键盘事件属性 引言 JavaScript 中的事件,当用户或浏览器尝试操作页面时,就会发生事件来处理 JavaScript 与HTML的交互.正如大家所知,JavaScript 与HTML一起工作,因此,页面加载.单击按钮.最小化窗口.单击鼠标.敲打键盘等发生的一切都是事件.就像在单击按钮时向用户显示任何消息一样,这是通过事件发生的. 所有HTML元素(如按钮.文本框.图像)都可以包含可以使用 JavaScript 代码触发的事件.所有这些事件都是DOM的一部分(文档对

  • vc控制台程序关闭事件时的处理方式及注意点详解

    百度可以找到很多关于这个问题解决的方法 关键控制台API函数:SetConsoleCtrlHandler 在支持C++ 11以上的编译器中,你可以这么做. SetConsoleCtrlHandler([](DWORD fdwctrltype)->BOOL { if (fdwctrltype == CTRL_CLOSE_EVENT) { // 你的善后代码... return TRUE; } return FALSE; }, TRUE); 最初这么做是很舒服的,但之后发现了问题: Windows控

  • jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del

  • javafx tableview鼠标触发更新属性详解

    本文实例为大家分享了javafx tableview鼠标触发更新属性,供大家参考,具体内容如下 public class HoverCell extends TableCell<Person, String> { public HoverCell(StringProperty hoverProperty) { setOnMouseEntered(e -> hoverProperty.set(getItem())); setOnMouseExited(e -> hoverProper

  • Vue.js事件处理器与表单控件绑定详解

    事件处理主要通过v-on这个指令来执行. 事件监听及方法处理 1.简单的可以直接内嵌在页面. 2.可以通过将方法定义在methods中,然后再v-on中执行 3.可以通过绑定给函数传递参数,还可以传递通过变量$event给函数传递原生DOM事件. <div id="app-1"> <button v-on:click="counter += 1">增加1</button> <p>这个按钮被点击了{{counter}}&

  • C#事件管理器如何清空所有监听详解

    C#事件使用+= -=使用起来是很方便的,但是却不能整体清空所有事件.比如一个常见的操作,打开界面注册监听事件,关闭界面需要把所有的事件清空了,这要在写一堆-=操作,如果漏清空的话肯定会造成隐患,如果在lua里这个很容易,但是C#却不行.所以我想了个办法,对Action和Func进行一次包装,就可以解决这个问题了. 这里我只封装了两个参数,大家可以继续拓展新的参数,我在项目里一共拓展了5个参数,完全够用了. using System; using System.Collections.Gener

  • Springboot事件和bean生命周期执行机制实例详解

    目录 @PostConstruct执行机制 ContextRefreshedEvent事件机制 ApplicationStartedEvent事件机制 总结 细节问题 原因 @PostConstruct执行机制 进入SpringApplication#run(java.lang.String…) public ConfigurableApplicationContext run(String... args) { StopWatch stopWatch = new StopWatch(); st

  • Flutter常用的布局和事件示例详解

    Flutter常用的布局和事件示例详解

    Flutter 项目中常用的布局详情,及封装和使用,快速开发项目. 以及手势事件和滚动事件的使用 Scaffold 导航栏的实现,有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单等 const Scaffold({ Key key, this.appBar,//标题栏 this.body,//内容 this.floatingActionButton,//悬浮按钮 this.persistentFooterButtons,//底部持久化现实按钮 this.drawer,//侧滑菜单

  • JavaScript 鼠标事件(MouseEvent)案例讲解

    JavaScript 鼠标事件(MouseEvent)案例讲解

    鼠标事件-MouseEvent 当鼠标进行某种操作时,就会生成一个event对象,该对象记录着鼠标触发事件时的所有属性. 可以通过如下方法在google控制台打印出 MouseEvent 对象. function mouseDown(e){ var e = e||event; console.log(e) } window.onload = function (){ document.getElementsByTagName('body')[0].addEventListener('moused

随机推荐