本人在学习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轴。
分享到：
相关推荐
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
在JavaScript编程中，实现窗口拖动效果是一项常见的需求，尤其在网页交互设计中。这个话题主要涉及以下几个核心知识点： 1. **DOM操作**：在JavaScript中，我们需要通过DOM（Document Object Model）来选取和操作...
JavaScript弹出窗口拖拽插件是一种实用的前端技术，它允许用户通过鼠标操作来改变div元素（即弹出窗口）的位置。这种插件基于JavaScript语言，无需依赖其他库如jQuery，因此具有轻量级和高效的特性。在网页设计中，...
这段代码实现了当用户按下鼠标时开始拖动窗口，拖动过程中更新窗口的位置，松开鼠标后停止拖动的功能。 最后，我们想要保存窗口的位置信息。这可以通过Ajax实现，比如在`mouseup`事件处理函数中添加以下代码： ```...
本教程将深入讲解如何使用jQuery实现一个弹出窗口，该窗口允许用户任意拖动来改变其大小，这样的功能在网页中常用于创建提示框或对话框，以优雅地展示信息或进行交互。 首先，我们需要引入jQuery库。这通常通过在...
标题所提及的“单击浏览器右上角的X关闭窗口弹出提示的小例子”就是一个这样的功能实现，它通过JavaScript来监控窗口关闭事件，并在用户尝试关闭时弹出一个提示信息。 首先，我们需要了解JavaScript中的`window`...
2. **初始位置记录**：在`mousedown`事件中，我们需要获取到当前鼠标点击时相对于窗口左上角的坐标，这将是拖动的起点。 3. **计算偏移量**：在`mousemove`事件中，我们将当前鼠标位置与起点位置进行比较，计算出...
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样 但是如果设置事件对象的定位属性值为relative event.clientX不变 而event.X返回事件对象的相对于本体的坐标 event对象详解 ICOOE 2000.3.31 ...
在JavaScript中，`offsetLeft`和`clientX`是两个非常重要的属性，它们在处理网页元素定位和事件处理时起到关键作用。理解这两个属性的含义和用法对于前端开发至关重要。 首先，`HTMLElement.offsetLeft`是HTML元素...
在Web开发中，实现窗口或元素的拖拽效果是一项常见的需求，特别是在构建用户界面时。Vue.js是一个流行的JavaScript框架，它提供了丰富的功能和简洁的API，使得开发这种交互功能变得简单。本文将深入探讨如何使用Vue....
在网页开发中，"拖拽+拖拽改变div大小"是一种常见的交互设计，它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...
标题“漂亮的DIV可拖动弹出窗口（精品）”所指的就是利用这些技术来实现一个既美观又具有交互性的弹出窗口。下面将详细介绍这个知识点。 首先，HTML是构建网页的基础，用来定义页面结构。在这个场景中，我们需要...
在这个例子中，我们创建了一个带有类名为`float-window`的浮动窗口，它有一个可拖动的处理区（类名为`handler`）。当用户按下鼠标并在处理区上移动时，`moveWindow`函数会被调用，根据鼠标的当前位置更新窗口的位置...
这个例子展示了如何使用HTML、CSS和JavaScript创建一个漂亮的、可拖动的div弹出窗口。然而，实际的网页开发中可能还需要考虑更多的细节，如关闭按钮、动画效果、响应式布局等。在"漂亮的div弹出.html"文件中，应该...
在JavaScript中实现小窗口拖拽效果是一项常见的交互设计任务，主要应用于网页上的浮动窗口或对话框，提升用户体验。本文将详细解析如何通过JS实现这一功能，并深入探讨其中的关键技术点。 首先，我们要创建一个可...
在本文中，我们将深入探讨如何使用CSS来创建一个可拖动的圆角窗口。这个功能在许多现代网页应用中非常常见，例如对话框、提示框或者自定义窗口。圆角窗口不仅美观，而且能提供更好的用户体验，而添加拖动功能则使...
在使用Electron构建桌面应用程序时，常常需要实现窗口的基本操作，如拖拽、最大化、最小化和关闭。这些功能是用户界面中不可或缺的部分，能够提供良好的用户体验。本篇文章将详细探讨如何在Electron内嵌的独立项目中...
javascrtpt 实现窗口拖拽、移动功能、显示坐标代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head runat...