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]
分享到:
相关推荐
语法:event.x 注释:这是个只读属性。 21. y属性 y属性用于返回鼠标在窗口客户区域中的Y坐标。语法:event.y 注释:这是个只读属性。 在JavaScript中,Event对象非常重要,它提供了许多有用的属性和方法,帮助...
语法:event.x 注释:这是个只读属性。 y 属性 y 属性用于返回鼠标在事件源元素中的 Y 坐标。语法:event.y 注释:这是个只读属性。 event 对象提供了许多有用的属性来检测和控制事件的状态,这些属性可以帮助...
然而,对于拖放功能,jQuery的核心库并未内置,而是通过扩展插件的形式提供,如`jquery.event.drag`。本文将深入探讨这个插件,解析其核心原理,并结合实际案例展示其应用。 一、`jquery.event.drag`插件简介 `...
如onmousemove=doMouseMove(event) 获取鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event....
- **鼠标位置(不考虑滚动条)**:IE使用event.x和event.y,FF使用event.pageX和event.pageY。通用做法是使用event.clientX和event.clientY。 - **鼠标位置(考虑滚动条)**:IE使用event.offsetX和event.offsetY...
总的来说,`event.clientX`和`event.X`的主要区别在于它们的坐标参考系不同,`clientX`始终基于浏览器的可视窗口,而`event.X`在定位属性为"relative"时会基于触发事件的元素。在编写JavaScript事件处理函数时,正确...
3. **鼠标位置**:`event.x`和`event.y`分别表示鼠标在页面上的X轴和Y轴坐标。 4. **活动元素**:`document.activeElement`可以获取当前焦点所在的元素。 5. **绑定事件**:可以使用`document.captureEvents(Event...
总结起来,通过JavaScript获取客户端鼠标的坐标信息主要涉及`event.clientX`、`event.clientY`、`getBoundingClientRect()`以及滚动偏移量等概念。理解和掌握这些知识点,可以让你在构建交互式Web应用时更加得心应手...
这段代码首先检查`event.x`和`event.y`是否存在,如果不存在,则使用`event.pageX`和`event.pageY`作为备选方案,确保在所有浏览器中都能正确获取鼠标坐标。 ### 结论 在进行Web开发时,特别是在处理事件和用户...
console.log('鼠标坐标: X = ' + event.clientX + ', Y = ' + event.clientY); }); ``` 在Python中,尤其是使用Tkinter库创建GUI时,可以通过`bind`方法绑定一个函数到`<Motion>`事件,然后在事件处理函数中获取...
5. **鼠标位置**:`event.x` 和 `event.y` 提供了鼠标相对于元素左上角的坐标。 6. **窗体活动元素**:`document.activeElement` 返回当前获取焦点的元素。 7. **绑定事件**:`document.captureEvents(Event....
event.x : event.pageX; var mY = event.y ? event.y : event.pageY; ``` 10. **event.srcElement**:IE使用`event.srcElement`来获取事件源,而FF使用`event.target`。为了兼容,可以这样做: ```javascript ...
location: event.mapPoint, features: features.results }); } }); ``` 以上就是利用ArcGIS API 4.x for JavaScript加载地图并展示多个气泡窗口的基础步骤。实际应用中,你可能还需要考虑其他因素,如图层的...
var x = event.clientX; // 鼠标相对于左边缘的水平坐标 var y = event.clientY; // 鼠标相对于顶部边缘的垂直坐标 console.log('相对于body的坐标:', {x, y}); }); ``` `clientX`和`clientY`属性提供了鼠标相...
### 封装自己的JavaScript工具——Event 在前端开发过程中,事件处理是不可或缺的一部分。不同的浏览器对事件的支持有所差异,特别是Internet Explorer(IE)与Firefox之间的区别。为了更好地跨浏览器兼容性和代码...
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...
5. **鼠标位置**:`event.x` 和 `event.y` 返回鼠标在当前元素内的坐标。 6. **活动元素**:`document.activeElement` 返回当前获取焦点的元素。 7. **绑定事件**:`document.captureEvents(Event.KEYDOWN)` 用于...
console.log('X坐标:', event.clientX, 'Y坐标:', event.clientY); }); ``` 这段代码会打印出每次鼠标移动时的坐标值。 2. **限制坐标范围** 在某些情况下,我们可能希望限制鼠标的活动范围,比如在一个特定...
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...
javascript Event 对象详解定义 在 JavaScript 中,Event 对象是事件状态的代表,它包含了事件发生的元素、键盘状态、鼠标位置和鼠标按钮状态等信息。一旦事件发生,浏览器的内存中就会生成相应的 Event 对象,如...