E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
screenX
区分event对象中的[clientX,offsetX,
screenX
,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置。clientXclientYevent.clientXevent.clientYclient直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。event.clientX、event.clientY就是用来获取鼠标距游览器显示窗
Rin阳
·
2020-03-06 10:31
点击事件event的offsetX/Y,pageX/Y,clientX/Y和
screenX
/Y
offsetX/Y相对于被点击元素的左上角,即使事件被绑定在父元素身上,那么这个位置也是相对于当前的target对象元素来说pageX/Y相对于文档document的左上角,即使有滚动条,文档被滚入一部分不可见,但这个位置依然是相对于文档来计算,包含的有文档被滚动条滚动隐藏的不可见部分clientX/Y相对于浏览器可视窗口的左上角,但是不包含浏览器的导航,页签等部分,仅限于浏览器展示文档的可见区域
AugustEchoStone
·
2020-02-12 15:29
javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、
screenX
、offsetX、pageX
原文:https://www.cnblogs.com/ifworld/p/7605954.html元素宽高offsetWidth//返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight//返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth//返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight//返回元素的高
wbytts
·
2020-02-06 10:00
JQuery的事件对象关于坐标的说明
screenX
、screenY表示相对屏幕
Azur_wxj
·
2020-01-07 23:07
辨析js Event对象的offsetX、clientY、pageX、
screenX
(转)
大致按照从小到大顺序依次解析:1.event.offsetX、event.offsetY鼠标相对于事件源元素(srcElement)的X,Y坐标,也作相对于触发事件的对象,只有IE事件有这2个属性,标准事件没有对应的属性。2.event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
TungLi
·
2020-01-05 17:01
event对象的offsetX, clientX, pageX,
screenX
,你能分清吗
1、clientX/Y绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标,event的clientX,clientY属性分别表示鼠标点击位置相对于文档的左边距,上边距,不随页面滚动而改变。element.onclick=function(event){vare=event||window.event;console.log('x':e.clientX,'y':e.clientY)}2、p
李铭让_Eric
·
2019-12-26 05:46
【总结】2017.02.28
注意:event.
screenX
//pc端event.change
I_am_Cynthia
·
2019-12-25 20:59
事件对象
但凡有事件的地方,event是一个关键字,不能用其他代替:vartest=function(a,b,c,d){console.log(a,b,c,d)//1MouseEvent{isTrusted:true,
screenX
一个废人
·
2019-12-25 16:11
vue实现拖拽效果
vue中实现拖拽效果,供大家参考,具体内容如下首先要搞明白分清clientYpageYscreenYlayerYoffsetY的区别作用3(事件对象中记录的鼠标位置)语法解释evt.
screenX
相对于屏幕的左上角为原点
webopenfather
·
2019-12-23 11:16
CSSOM 视图模式
包括:innerWidth属性和innerHeight属性pageXOffset属性和pageYOffset属性
screenX
属性和screenY属性outerWidth属性和outerHeight属性
tanyp
·
2019-12-23 11:56
一张图轻松搞懂javascript event对象的clientX,offsetX,
screenX
,pageX区别
总是会被javascript的event对象的clientX,offsetX,
screenX
,pageX弄得头晕,于是决定做个图来区分一下.先总结下区别:event.clientX、event.clientY
heart丶掏空
·
2019-12-20 01:55
javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、
screenX
、offsetX、pageX
offsetWidth//返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight//返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth//返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight//返回元素的高度(包括元素高度、内边距,不包括边框和外边距)style.width//返回元素的宽度(包括元素宽度,不包
啊啊啊阿南
·
2019-12-17 01:39
2019-07-01
Delay2000DimscreenX,screenY,deviceID,first=25
screenX
=GetScreenX()screenY=GetScreenY()deviceID=GetDeviceID
麦子时光_新浪微博
·
2019-12-13 10:20
offsetXY clientXY screenXY pageXY
offsetX鼠标相对于事件源左上角X轴的坐标offsetY鼠标相对于事件源左上角Y轴的坐标
screenX
鼠标相对于显示器屏幕左上角x轴的坐标;screenY鼠标相对于显示器屏幕左上角y轴的坐标;clientX
张海峰999
·
2019-12-08 22:00
获取鼠标位置(区分event对象中的 clientX、offsetX、
screenX
、pageX )
作用:都是用来获取鼠标的位置clientXclientYevent.clientXevent.clientYclient直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。兼容性:IE和主流游览器都支持。offsetXoffsetYevent.offsetXeve
教父的秘书
·
2019-11-09 08:41
javascript
JavaScript获取可视区、页面内容、浏览器宽高、滚动高度
y坐标(只读)screenLeft||screenXscreenTop||screenY兼容性IE、Safari和Opera支持ScreenLeft/ScreenTopFirefox、Safari支持
ScreenX
教父的秘书
·
2019-11-09 07:40
javascript
js下的window.screenLeft,window.
screenX
,window.innerWidth等
众所周知,javascript差不多由三部分组成,ECMAscript,BOM,DOM。而BOM代表的是游览器模型,各大游览器兼容是最麻烦的,今天主要是几个游览器对窗口,视口位置、大小的兼容处理。1、游览器视口距离屏幕的位置(左上角)left及topie,chrome:支持window.screenLeft,window.screenTop--------------ie/55,0(默认加上上面导
与鱼雨遇
·
2019-11-06 06:41
学习,强国视频脚本
使用720*1280比率屏幕设置Delay2000DimscreenX,screenY,deviceID,first=25
screenX
=GetScreenX()screenY=GetScreenY()
麦子时光_新浪
·
2019-10-24 15:18
怎样理解window对象的几组位置大小属性
第一组:window.
screenX
和window.screenY,只读,返回浏览器窗口左上角与屏幕左上角的水平距离和垂直距离(单位像素);第二组:window.innerHeight和window.innerWidth
aisowe
·
2019-10-19 10:00
JavaScript中判断页面关闭、页面刷新的实现代码
请看一下代码:复制代码代码如下:window.onunload=function(){vara_n=window.event.
screenX
-window.screenLeft;vara_b=a_n>document.documentElement.s
·
2019-09-23 18:34
js监控IE火狐浏览器关闭、刷新、回退、前进事件
window.event||arguments[0];varuserAgent=navigator.userAgent;if(userAgent.indexOf("MSIE")>0){varn=window.event.
screenX
-window.screenLef
·
2019-09-23 18:15
Js event对象offsetX,pageX,
screenX
,clientX详解
(IE7/8无)(类似于event.clientX和event.clientY)检测相对于屏幕的位置:
screenX
和scr
Big哈勃
·
2019-08-29 19:00
图解Js event对象offsetX, clientX, pageX,
screenX
, layerX, x区别
---恢复内容开始---event对象的clientX,clentY、pageX,pageY、
screenX
,screenY的区别event的layerX和layerY的区别event的x和y的区别--
一颗小石子激起的浪花
·
2019-08-09 19:00
window对象
outerHeight:window.outerHeight:整个窗口的整体高度,包括到地址栏那些outerWidth:同上screenY:window.screenY:整个浏览器窗口距离系统桌面顶部的距离
screenX
改个名字吧
·
2019-06-13 11:00
clientX、
screenX
、pageX、offsetX、pageXOffset的区别
event.clientX与event.clientY鼠标相对于浏览器可视区域的X,Y坐标(将参照点改成了浏览器内容区域的左上角),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。event.pageX与event.pageY类似于event.clientX、event.clientY,但它们是相对于整个html文档坐标(包含了文档过长而被卷去的长度/宽度)而非浏览器可视区域坐
李寻欢_
·
2019-06-10 15:42
图解Js event对象offsetX, clientX, pageX,
screenX
, layerX, x区别
通过3张图和1张表格,轻松区别JavascriptEvent对象中的offsetX,clientX,pageX,
screenX
,layerX,x等属性。
GaojbSunny
·
2018-12-11 17:10
js基础
jQuery
鼠标事件以及clientX、offsetX、
screenX
、pageX、x的区别
转自https://blog.csdn.net/weixin_41342585/article/details/80659736鼠标事件鼠标事件有下面这几种:1.onclick鼠标点击事件box.onclick=function(e){console.log(e)}2.onmousedown鼠标按下事件box.onmousedown=function(e){console.log(e)}3.onm
Alex_________
·
2018-12-10 11:37
js
dom元素、鼠标元素位置clientX、clientY、offsetX、offsetY、
screenX
、screenY、pageX、pageY
event.clientX设置或获取鼠标指针位置相对于当前窗口的x坐标,其中客户区域不包括窗口自身的控件和滚动条。(可见区域)event.clientY设置或获取鼠标指针位置相对于当前窗口的y坐标,其中客户区域不包括窗口自身的控件和滚动条。(可见区域)event.offsetX设置或获取鼠标指针位置相对于触发事件的对象的x坐标。(触发事件的元素,ie,chrome支持此属性,ff不支持)event
娑婆訶
·
2018-11-15 11:33
新游戏方舟指令脚本ver.1
Delay2000DimscreenX,screenY,deviceID,first=1
screenX
=GetScreenX()screenY=GetSc
Misaka10013
·
2018-09-28 22:53
offsetX、clientX、
screenX
、pageX、layerX
黑色为鼠标点击点)(测试了IE11、Opera54.0.2952.71、Chrome68.0.3423.2、Firefox61.0.2中offset均不含边框的宽度)clientX/Y原点相对于可视窗口左上角
screenX
Chellyyy
·
2018-08-14 16:00
网站中添加facebook分享功能
window.screenLeft:window.
screenX
;wTop=window.screenTop?
微微一笑倾城
·
2018-06-27 12:51
用python和pygame写一个简单的贪吃蛇游戏
GitHubSnake#-*-coding:utf-8-*-importpygame,sys,randomfrompygame.localsimport*pygame.init()
ScreenX
=500ScreenY
Tony5t4rk
·
2018-06-22 01:22
pageX、clientX、
screenX
、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft
(跟
screenX
相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动,也就是说,他计算left或top
一一Left一一
·
2018-06-20 15:35
JavaScript Event 对象中的offsetX, clientX, pageX,
screenX
, layerX, x
内容即为width.png图片.png图片.png图片.png图片.png图片.png网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的宽)网页正文全文宽
Left左
·
2018-06-12 19:23
浏览器对象
window.screenLeft:window.
screenX
;vartopPos=(typeofwindow.screenTop=='number')?window.screenTop:
YC____
·
2018-05-10 22:56
页面元素坐标和偏移
鼠标事件1.客户区坐标位置(clientX/clientY)通过event事件对象的clientX/clientY属性,获得事件发生时鼠标指针在视口的水平垂直坐标2.屏幕坐标位置(
screenX
/screenY
greenteaObject
·
2018-01-10 14:20
浅谈JS中的坐标获取
关于鼠标坐标鼠标坐标一般是用event事件获取,其中有以下几个方法:pageX,pageY*
screenX
,*screenY*clientX,*clientY其中以pageX,pageY方法使用得较多,
丶chlorine
·
2017-12-09 22:37
event
1.事件对象的获取varevent=event||window.event;//兼容写法,ie678中支持window.event2.event事件重要内容event.png3.
screenX
、pageX
那一抹流星
·
2017-11-30 13:53
DOM元素位置,滚动位置和鼠标事件位置相关属性函数总结
元素的右边距离可视窗口左边的距离top元素的上边距离可视窗口顶部的距离bottom元素的下边距离可视窗口顶部的距离width元素的宽height元素的高x/y目前来看与let/top相同鼠标相关事件位置属性
screenX
jackwang
·
2017-11-11 00:00
dom
javascript
事件的冒泡捕获阻止默认代理
//得到事件——对象MouseEvent{isTrusted:true,
screenX
:594,screenY:87,clientX:37,clientY:21…}
流着万条永远的河
·
2017-09-15 17:58
offsetLeft,Left,clientLeft,clientX,pageX,
screenX
的区别
271c0580650e1297284eeac9c6592f81_0928300.gifevent.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口
zhangmz
·
2017-08-10 16:49
screen,client,page三种确定鼠标坐标的区别和原生JS事件写法,区别于Jquery的$.on(x,y);和$.click()
screenXclientXpageX的区别
screenX
:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。
天才老王1993
·
2017-07-25 10:00
JS事件
window.addEventListener('touchstart',function(){nstartY=e.targetTouches[0].screenY;nStartX=e.targetTouches[0].
screenX
婷楼沐熙
·
2017-05-04 16:39
HTML 鼠标坐标和元素坐标
获取的坐标可分为2种:1)MouseEvent.
screenX
、MouseEvent.screenY:基于屏幕的X、Y坐标;以屏幕的左上角为0,0起始点。
方木一
·
2017-03-31 23:00
js实现百度登录框鼠标拖拽效果
知识点:1.掌握对可拖拽对话框的实现原理2.了解元素如何触发脚本方法以及如何编写侦听事件3.学会设置元素在页面中居中和全屏注意区别:1.
screenX
:鼠标位置相对于用户屏幕水平偏移量,而screenY
Vampire-blog
·
2017-03-07 16:32
pageX,clientX,offsetX,layerX的区别
也让我们这些前端攻城狮十分无语和纠结>_*{margin:0;padding:0}span{padding-right:10px;}长,宽都是100pxpageX:clientX:scrollLeft:
screenX
大鹏的世界
·
2017-02-17 17:03
HTML5+CSS3
JavaScript 获取鼠标点击坐标五种方式及兼容性
javascript-got-mouse-position/关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种event.clientX/Yevent.pageX/Yevent.offsetX/Yevent.layerX/Yevent.
screenX
福州-司马懿
·
2017-01-17 17:09
——
JavaScript
CSSOM视图模式(CSSOM View Module)相关整理
包括:innerWidth属性和innerHeight属性pageXOffset属性和pageYOffset属性
screenX
属性和screenY属性outerWidth属性和outerHeight属性相关属性组对应的兼容性以及使用见下面
mmww1024
·
2017-01-12 17:00
浏览器对象的各种宽高
Window对象属性ScreenLeft/ScreenTop/
ScreenX
/ScreenY只读整数,声明了窗口的左上角在屏幕上的x坐标和y坐标。
frwupeng517
·
2016-12-19 12:39
screen
offsetX
clientX
js
JQuery开发5-在网页中获取鼠标的三种坐标
分别用的方法名称为
screenX
和screenY,clientX和clientY,pageX和pageY。
舟舟同学
·
2016-05-31 21:21
jquery
上一页
1
2
3
4
5
6
7
8
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他