`
zhaole609
  • 浏览: 342697 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类
最新评论

javascript 坐标:event.X event.Y

 
阅读更多

javascript坐标:event.x、event.clientX、event.offsetX、event.screenX


[size=x-small;]clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。[/size]

[size=x-small;]event.clientX返回事件发生时,mouse相对于客户窗口的X坐标,event.X也一样。但是如果设置事件对象的定位属性值为relative,event.clientX不变,而event.X返回事件对象的相对于本体的坐标。[/size]

[size=x-small;]
var strInfo="";

strInfo+="\r\n网页可见区域宽:"+document.body.clientWidth;

strInfo+="\r\n网页可见区域高:"+document.body.clientHeight;

strInfo+="\r\n网页可见区域宽:"+document.body.offsetWidth+"(包括边线的宽)";

strInfo+="\r\n网页可见区域高:"+document.body.offsetHeight+"(包括边线的宽)";

strInfo+="\r\n网页正文全文宽:"+document.body.scrollWidth;

strInfo+="\r\n网页正文全文高:"+document.body.scrollHeight;

strInfo+="\r\n网页被卷去的高:"+document.body.scrollTop;

strInfo+="\r\n网页被卷去的左:"+document.body.scrollLeft;

strInfo+="\r\n网页正文部分上:"+window.screenTop;

strInfo+="\r\n网页正文部分左:"+window.screenLeft;

strInfo+="\r\n屏幕分辨率的高:"+window.screen.height;

strInfo+="\r\n屏幕分辨率的宽:"+window.screen.width;

strInfo+="\r\n屏幕可用工作区高度:"+window.screen.availHeight;

strInfo+="\r\n屏幕可用工作区宽度:"+window.screen.availWidth;

window.confirm(strInfo);
[/size]

分享到:
评论

相关推荐

    javascript之Event详解[定义].pdf

    语法:event.x 注释:这是个只读属性。 21. y属性 y属性用于返回鼠标在窗口客户区域中的Y坐标。语法:event.y 注释:这是个只读属性。 在JavaScript中,Event对象非常重要,它提供了许多有用的属性和方法,帮助...

    Javascript之event大全

    语法:event.x 注释:这是个只读属性。 y 属性 y 属性用于返回鼠标在事件源元素中的 Y 坐标。语法:event.y 注释:这是个只读属性。 event 对象提供了许多有用的属性来检测和控制事件的状态,这些属性可以帮助...

    jquery.event.drag jquery拖动插件

    然而,对于拖放功能,jQuery的核心库并未内置,而是通过扩展插件的形式提供,如`jquery.event.drag`。本文将深入探讨这个插件,解析其核心原理,并结合实际案例展示其应用。 一、`jquery.event.drag`插件简介 `...

    Javascript下IE与Firefox下的差异兼容写法总结

    如onmousemove=doMouseMove(event) 获取鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event....

    JavaScript兼容浏览器FFIE技巧[定义].pdf

    - **鼠标位置(不考虑滚动条)**:IE使用event.x和event.y,FF使用event.pageX和event.pageY。通用做法是使用event.clientX和event.clientY。 - **鼠标位置(考虑滚动条)**:IE使用event.offsetX和event.offsetY...

    event.X和event.clientX的区别分析

    总的来说,`event.clientX`和`event.X`的主要区别在于它们的坐标参考系不同,`clientX`始终基于浏览器的可视窗口,而`event.X`在定位属性为"relative"时会基于触发事件的元素。在编写JavaScript事件处理函数时,正确...

    Javascript技巧很全.doc

    3. **鼠标位置**:`event.x`和`event.y`分别表示鼠标在页面上的X轴和Y轴坐标。 4. **活动元素**:`document.activeElement`可以获取当前焦点所在的元素。 5. **绑定事件**:可以使用`document.captureEvents(Event...

    使用JavaScript获取客户端的鼠标坐标信息

    总结起来,通过JavaScript获取客户端鼠标的坐标信息主要涉及`event.clientX`、`event.clientY`、`getBoundingClientRect()`以及滚动偏移量等概念。理解和掌握这些知识点,可以让你在构建交互式Web应用时更加得心应手...

    event兼容调用(IE,Firefox,Chrome)

    这段代码首先检查`event.x`和`event.y`是否存在,如果不存在,则使用`event.pageX`和`event.pageY`作为备选方案,确保在所有浏览器中都能正确获取鼠标坐标。 ### 结论 在进行Web开发时,特别是在处理事件和用户...

    取得鼠标坐标.rar

    console.log('鼠标坐标: X = ' + event.clientX + ', Y = ' + event.clientY); }); ``` 在Python中,尤其是使用Tkinter库创建GUI时,可以通过`bind`方法绑定一个函数到`<Motion>`事件,然后在事件处理函数中获取...

    javascript小技巧.doc

    5. **鼠标位置**:`event.x` 和 `event.y` 提供了鼠标相对于元素左上角的坐标。 6. **窗体活动元素**:`document.activeElement` 返回当前获取焦点的元素。 7. **绑定事件**:`document.captureEvents(Event....

    FF与IE对javascript和CSS的区别

    event.x : event.pageX; var mY = event.y ? event.y : event.pageY; ``` 10. **event.srcElement**:IE使用`event.srcElement`来获取事件源,而FF使用`event.target`。为了兼容,可以这样做: ```javascript ...

    arcgis api 4.x for js 地图加载多个气泡窗口展示.zip

    location: event.mapPoint, features: features.results }); } }); ``` 以上就是利用ArcGIS API 4.x for JavaScript加载地图并展示多个气泡窗口的基础步骤。实际应用中,你可能还需要考虑其他因素,如图层的...

    javascript获得鼠标的坐标值

    var x = event.clientX; // 鼠标相对于左边缘的水平坐标 var y = event.clientY; // 鼠标相对于顶部边缘的垂直坐标 console.log('相对于body的坐标:', {x, y}); }); ``` `clientX`和`clientY`属性提供了鼠标相...

    封装自己的js工具-Event.txt

    ### 封装自己的JavaScript工具——Event 在前端开发过程中,事件处理是不可或缺的一部分。不同的浏览器对事件的支持有所差异,特别是Internet Explorer(IE)与Firefox之间的区别。为了更好地跨浏览器兼容性和代码...

    Vue简单的图片区域裁切组件

    this.startPos = { x: event.clientX, y: event.clientY }; }, dragging(event) { if (this.isDragging) { const newPos = { x: event.clientX - this.startPos.x + this.cropBox.x, y: event.clientY - this...

    程序员常用代码小技巧javascript归纳.pdf

    5. **鼠标位置**:`event.x` 和 `event.y` 返回鼠标在当前元素内的坐标。 6. **活动元素**:`document.activeElement` 返回当前获取焦点的元素。 7. **绑定事件**:`document.captureEvents(Event.KEYDOWN)` 用于...

    How to Read Mouse Coordinates using Javascript.zip

    console.log('X坐标:', event.clientX, 'Y坐标:', event.clientY); }); ``` 这段代码会打印出每次鼠标移动时的坐标值。 2. **限制坐标范围** 在某些情况下,我们可能希望限制鼠标的活动范围,比如在一个特定...

    Ext Js权威指南(.zip.001

    1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    javascriptEvent对象详解定义.pdf

    javascript Event 对象详解定义 在 JavaScript 中,Event 对象是事件状态的代表,它包含了事件发生的元素、键盘状态、鼠标位置和鼠标按钮状态等信息。一旦事件发生,浏览器的内存中就会生成相应的 Event 对象,如...

Global site tag (gtag.js) - Google Analytics