本人在学习JavaScript事件注册、事件传递时，在网上找了一个很经典的窗口拖拽事例，其中牵扯到x、clientX、screenX等属性的区别，相信很多学习者在看到这个事例后，也查阅了许多相关材料，在此我也结合该事例，讲讲自己的理解。
首先给出该拖拽事例代码:
<html>
<head>
<title>空谷悠悠</title>
<script type="text/javascript" >
function beginDrag(elementToDrag,event)
{
//该元素当前位于何处
//该元素的样式性质必须具有left和top css属性
//此外，我们假定他们用象素做单位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//计算一个点(这个点应该是窗口第一次的坐标点)和鼠标点击之间的距离，下面的嵌套的moveHandler函数需要这些值
// var deltaX=event.clientX-parseInt(elementToDrag.style.left);style.left返回的是字符串，如28px,offsetLeft返回的是数值28，如果需要对取得的值进行计算，还是用offsetLeft比较方便
var deltaX = event.clientX-elementToDrag.offsetLeft;
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注册mousedown事件后发生的mousemove和mouseup事件的处理程序
// 注意，它们被注册为文档的捕捉事件处理程序
// 在鼠标按钮保持按下的状态的时候，这些事件处理程序保持活动的状态
// 在按钮被释放的时候，它们被删除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我们已经处理了该事件，不要让别的元素看到它
event.cancelBubble=true;
event.returnValue=false;
/*
这是在元素被拖动时候捕捉mousemove事件的处理程序，它响应移动的元素
*/
function moveHandler()
{
//把元素移动到当前的鼠标位置
// e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要让别的元素看到该事件
event.cancelBubble=true;
}
/*
该事件将捕捉拖动结束的时候发生的mouseup事件
*/
function upHandler()
{
//注销事件处理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
event.cancelBubble=true;
}
</script>
</head>
<body >
<div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;">
<div style="background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" onmousedown="beginDrag(this.parentNode,event);">
拖动我
</div>
<div>
<p>This is a test.Testing,testing</p></div>
</div>
</body>
</html>
在做窗口拖拽时，很关键的是准确得到坐标点，这里var deltaX = event.clientX-elementToDrag.offsetLeft;这段码求出了x轴坐标点的该变量，也就是因为这些，本文并不详解事件注册，冒泡机制，因为注释也写的比较详细了。本文要做的就是在代码的基础上，解释x、clientX、screenX等属性的区别。看如下代码：
<html>
<script>
function beginDrag(elementToDrag,event){
// parseInt(elementToDrag.style.left)等价于elementToDrag.offsetLeft，
//因为style.left返回的是字符串，如28px，因此需要解析为数字
var deltaX = event.clientX-elementToDrag.offsetLeft;
var deltaY = event.clientY-elementToDrag.offsetTop;
//注册mousedown事件后，要发生的mousemove和mouseup事件的处理程序
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
// 我们已经处理了该事件，不要让别的元素看到它
event.cancelBubble=true;
event.returnValue =false;
function moveHandler(){
elementToDrag.style.left = (event.clientX-deltaX)+"px";
elementToDrag.style.top =(event.clientY-deltaY)+"px";
event.cancelBubble=true;
}
function upHandler(){
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
event.cancelBubble = true;
}
function clientCoords(){
var offsetInfo = "";
offsetInfo += "The clientx coordinate is :"+window.event.clientX+"\r"
offsetInfo += "The clienty coordinate is :"+window.event.clientY+"\r"
offsetInfo +="The offsetX is :"+window.event.offsetX+"\r"
offsetInfo +="The screenX is :"+window.event.screenX+"\r"
alert(offsetInfo);
}
</script>
<body onclick="clientCoords()" onmousemove=
"window.status='clientX='+window.event.clientX+'clientY='+window.event.clientY">
<div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;" onmousedown="beginDrag(this,event)" name="div1">
<div style="background-color:blue;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" name="div2" onmousedown="beginDrag(this.parentNode,event);">
拖动我
</div>
<div>
<p>This is a test.Testing,testing</p></div>
</div>
</body></html>
随意点击窗口
因此：
clinetX是相对于浏览器的X轴。
offsetX，假如在用户区域点击，如这里的“拖动我”DIV中，它是相对用户区域的X轴，如果在用户区外点击，值与clientX相同。
screenX相对于计算机显示器的X轴。
分享到：
相关推荐
NULL 博文链接：https://meizhi.iteye.com/blog/576133
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样 但是如果设置事件对象的定位属性值为relative event.clientX不变 而event.X返回事件对象的相对于本体的坐标 event对象详解 ICOOE 2000.3.31 ...
javascrtpt 实现窗口拖拽、移动功能、显示坐标代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head runat...
单击浏览器右上角的X弹出提示窗口，简单实现。 代码如下:[removed] [removed] = function () { if (event.clientY < 0 && event.clientX> document.body.scrollWidth) { //event.returnValue = ...
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像
可实现任意拖动，有标题栏功能 var moveFlag = 0;//拖曳是否开始(0:否,1:是) var mouseBeginX = 0;//鼠标的起始x座标 var mouseBeginY = 0;//鼠标的起始y座标 var modeBeginTop = 0;//拖曳对象当前的top值 var ...
本文实例为大家分享了vue实现拖拽x效果的具体代码，供大家参考，具体内容如下 实现拖拽之前，先了解几个小常识： 这两种获取鼠标坐标的方法，区别在于基于的对象不同： pageX和pageY获取的是鼠标指针距离文档（HTML...
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <...
4. x 和 y：一般情况下，这两个属性与 clientX、clientY 相似，但有所不同。 二、DOM 对象 DOM 对象提供了多个属性来获取元素的位置、大小等信息。其中包括： 1. offsetTop 和 offsetLeft：获取元素相对于其 ...
本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考，具体如下： 方式一：(适用于IE浏览器，而且刷新不提示，只在点击浏览器关闭按钮的时候提示) [removed] [removed]=onclose; function ...
可拖动的table #draggable{ padding:absolute; height:600px; position:absolute; } var rDrag = { o:null, init:function(o){ o.onmousedown = this.start; }, start:function(e){ var o; e = rDrag....
学会如何制作弹出窗口特效，了解把元素设置为可拖拽的原理。 知识点： 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 注意区别： 1.screenX:...
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
z.style.pixelLeft=temp1+event.clientX-x z.style.pixelTop=temp2+event.clientY-y return false }} function drags(){ if (!document.all) return if (event.srcElement.className=="drag"){ dragapproved=true z=...
Linux下的MySQLv5.0.26ForRedHat3RPM-clientx86安装包
拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小，所以我给它设定一个范围，当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色...