鼠标事件中各种位置

系统管理员 2022-06-06 05:26 198阅读 0赞

鼠标事件都是在browser中的特定位置发生的，而我们可以通过事件对象event的各种属性获取到鼠标事件发生的位置。  
（1）客户区坐标位置  
这一位置是相对于视口而言，所谓视口就是你所看到的browser展示页面的大小。不包括browser的菜单栏和滚动条覆盖的部分。

event.clientX;
        event.clientY;

（2）页面坐标位置（IE8及以下不支持这一属性）  
该坐标是相对于页面而言的，页面就是整个网页页面。它包括了滚动条覆盖的页面部分，也不包括browser菜单栏部分。

event.pageX;
        event.pageY;

a.在无滚动条的情况下，clientX、clientY和pageX、pageY是相同的。  
b.若在IE8及以下内想得出页面坐标，则可以使用滚动事件获取滚动信息和客户区坐标

var div=document.getElementById("div");
    div.attachEvent('onclick',function(event){
        var pageX=event.pageX;
        var pageY=event.pageY;
        if(pageX==='undefined'){
            pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
            pageY=event.clientY+(document.body.scrollTop||document.document.documentElement.scrollTop);
    }
    })

（3）屏幕坐标  
该坐标相对于屏幕左上角而言，也就是说和clientX、clientY相比多了browser的菜单栏部分。

event.screenX;
    event.screenY

（4）layerX、layerY  
这个属性用的相对少点，当元素是绝对定位时（position：absolute），相对于元素自身的左上角定位

event.layerX;
    event.layerY;

!<–只是个人总结，如有不对的地方，请尽情喷哈哈哈哈哈–>

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 java工作复习——鼠标事件——action类——模拟鼠标从一个位置移动到另外一个位置...

package rjcs; import java.text.SimpleDateFormat; import java.util.Calen

我不是女神ヾ/ 2023年10月03日 17:03/ 0 赞/ 23 阅读

相关鼠标事件

1.移动、点击 <Grid> <Grid.RowDefinitions> <RowDefinition></R

小灰灰/ 2023年08月17日 16:53/ 0 赞/ 58 阅读

相关鼠标事件

–鼠标事件 click：单击 dbclick：双击 mousedown：用户按下任何鼠标按钮触发；冒泡 mouseup：用户释放鼠标按钮时触发；冒泡 mous

太过爱你忘了你带给我的痛/ 2023年07月13日 15:11/ 0 赞/ 18 阅读

相关 QT鼠标响应事件和获取鼠标位置

//鼠标按下事件 ```c void MainWindow::mousePressEvent(QMouseEvent event) {

你的名字/ 2023年01月01日 11:47/ 0 赞/ 214 阅读

相关 JQuery中的各种事件

文档加载完成加载文档完成触发： $(document).ready(function(){}) 事件可以多次执行。代码可以简写为： $(fu

柔光的暖阳◎/ 2022年11月27日 00:49/ 0 赞/ 155 阅读

相关鼠标事件中各种位置

鼠标事件都是在browser中的特定位置发生的，而我们可以通过事件对象event的各种属性获取到鼠标事件发生的位置。（1）客户区坐标位置这一位置是相对于视口而言，所

系统管理员/ 2022年06月06日 05:26/ 0 赞/ 199 阅读

相关 Java中如何监听鼠标事件

当点击鼠标按钮时，有三个监听器方法可以调用：①鼠标按下时调用mousePressed；②鼠标被释放时调用mouseReleased；③关注鼠标的最终点击事件时调用mouseCl

今天药忘吃喽~/ 2022年05月28日 11:39/ 0 赞/ 586 阅读

相关鼠标事件事件对象

事件对象：事件在浏览器中是以对象的形式存在的，触发一个事件，就会产生一个事件对象event，该对象包含所有与事件相关的信息，鼠标操作产生的event中会包含鼠标位置的信息，键盘

Dear 丶/ 2022年05月17日 11:46/ 0 赞/ 311 阅读

相关鼠标中键滚轮事件

![QQ_E6_88_AA_E5_9B_BE_E6_9C_AA_E5_91_BD_E5_90_8D.png][] 今天在开发的过程中为了有更好的用户体验，使用了滚轮事件，发上

客官°小女子只卖身不卖艺/ 2021年11月01日 14:00/ 0 赞/ 543 阅读

相关各种事件（html事件，鼠标事件，键盘事件，焦点事件以及阻止默认事件）

HTML事件 onload 事件页面或图片加载完成后执行只有图片和页面可以执行 window.οnlοad=function(){ //整个

短命女/ 2021年10月24日 03:24/ 0 赞/ 543 阅读