screenX clientX pageX的区别
screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。
clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。
pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动
如图(红点就是鼠标当前位置)
'
缩小浏览器窗口就能看出很明显的差别
示例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.div {
text-align: center;
font-size: 24px;
height: 300px;
width: 1300px;
line-height: 300px;
color: yellow;
} #d1 {
background-color: red;
} #d2 {
background-color: green; } #d3 {
background-color: blue;
} #d4 {
position: absolute;
background-color: yellow;
height: 150px;
width: 120px;
top: 0;
}
</style>
<script type="text/javascript"> $(function () { window.onscroll = function () {
$("#d4").css("top", getScrollTop());
}; document.onmousemove = function (e) {
if (e == null) {
e = window.event;
}
var html = "screenX:" + e.screenX + "<br/>";
html += "screenY:" + e.screenY + "<br/><br/>";
html += "clientX:" + e.clientX + "<br/>";
html += "clientY:" + e.clientY + "<br/><br/>";
if (e.pageX == null) {
html += "pageX:" + e.x + "<br/>";
html += "pageY:" + e.y + "<br/>";
} else {
html += "pageX:" + e.pageX + "<br/>";
html += "pageY:" + e.pageY + "<br/>";
} $("#d4").html(html);
};
}); function getScrollTop() {
var top = (document.documentElement && document.documentElement.scrollTop) ||
document.body.scrollTop;
return top;
}
</script>
</head>
<body>
<div id="d1" class="div">div1 height:300px width:1300px</div>
<div id="d2" class="div">div2 height:300px width:1300px</div>
<div id="d3" class="div">div3 height:300px width:1300px</div>
<div id="d4"></div>
</body>
</html>
screenX clientX pageX的区别的更多相关文章
- 理解screenX clientX pageX概念
先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量,而screenY就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX: 跟s ...
- screenX clientX pageX区别
screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...
- screenX, clientX, pageX
screenX:鼠标相对屏幕左上角的水平偏移量. clientX:鼠标相对于浏览器左上角的水平偏移量,会随着滚动条的移动而移动. pageX:鼠标相对浏览器左上角的水平偏移量.不会随着滚动条的移动而移 ...
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- JS-特效 ~ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...
- screenX、clientX、pageX的区别
screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...
- pageX,clientX,screenX,offsetX的区别
pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不 ...
- 鼠标事件以及clientX、offsetX、screenX、pageX、x的区别
鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 ...
- event对象中offsetX,clientX,pageX,screenX的区别
1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...
随机推荐
- vs配置opencv
配置OpenCv: 一.新建工程 无论是mfc还是控制台程序都可以. 二.下载opencb,安装在非空格路径下面 解压出来有两个文件夹:build和source,主要用到build,build-x86 ...
- 编写一个Car类,具有final类型的属性品牌,具有功能drive; 定义其子类Aodi和Benchi,具有属性:价格、型号;具有功能:变速; 定义主类E,在其main方法中分别创建Aodi和Benchi的对象并测试对象的特 性。
package b; public class Car { public final static Car pinpai=new Car(); public static Car instance() ...
- Python中时间的处理之——timedelta篇
#! /usr/bin/python # coding=utf-8 from datetime import datetime,timedelta """ timed ...
- c# 基础之数组(包含三维数组)
public enum ChessType { White = , None=, Black=, } class Program { static void Main(string[] args) { ...
- 线程入门之yield
package com.thread; /** * <yiedl:把cpu让给其他线程> * <功能详细描述> * * @author 95Yang */ public cla ...
- How to crack interviews ...
Code practice: Leetcode: www.leetcode.com HackerRank: www.hackerrank.com Topcoder: https://www.topco ...
- python_way day12 sqlalchemy,原生mysql命令
python_way day12 sqlalchemy,mysql原生命令 1.sqlalchemy 2.mysql 原生命令 一,sqlalchemy SQLAlchemy本身无法操作数据库,其必 ...
- [转载] 每周推荐阅读 BFQ:实现IO的隔离共享与高吞吐访问
磁盘IO和网络IO隔离与共享是混部应用中基本需求,从早些年的BVC到现在的Matrix,以及Galaxy,或者未来的BS/Mint混部都遇到类似的问题:由于无法有效实现IO级的隔离(包括吞吐隔离.延时 ...
- Java Ant build.xml详解
1,什么是antant是构建工具2,什么是构建概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个3,ant的好处跨平台 --因为 ...
- 2015苹果WWDC开发者大会
2015苹果WWDC开发者大会 (1)本届主题为“the epicenter of change(变革的中心)” (2)iOS 9.OS X.watchOS三款重要系统更新以及其他服务 (3)iOS ...