如何策划一个网站,广元城乡建设部网站首页,大型网站建设兴田德润简介,交换友情链接时需要注意的事项Js中client、offset和screen的区别 前言图文解说实例代码解说 前言
本文主要讲解JavaScript中clientX、clientY、offsetX、offsetY、screenX、screenY之间的区别。
图文解说 在上图中#xff0c;有三个框#xff0c;第一个为屏幕#xff0c;第二个为浏览器大小#xff0c… Js中client、offset和screen的区别 前言图文解说实例代码解说 前言
本文主要讲解JavaScript中clientX、clientY、offsetX、offsetY、screenX、screenY之间的区别。
图文解说 在上图中有三个框第一个为屏幕第二个为浏览器大小第三个为某个DOM元素。而点击事件属性中的screenX或Y就是距离屏幕左、上侧的距离而clientX和clientY就是距离浏览器左、上侧的距离子u后offsetX、offsetY就是跟点击时鼠标在哪个元素中那么就计算跟这个元素的左、上侧距离。也就是下图所示。 在上图中我们点击了这个正方形DOM元素那么它的offsetX就是距离这个正方形元素左侧的距离而offsetY就是距离正方形上侧的距离它的clientX就是距离浏览器左侧的距离clientY就是距离浏览器上侧的距离它的screenX就是距离它整个屏幕左侧的距离它的screenY就是距离它整个屏幕上侧的距离。
实例代码解说
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodydiv stylewidth:200px;height:200px;border:1px solid gray;/divscriptdocument.onmousedownfunction(e){console.log(距离点击元素位置,e.offsetX,e.offsetY);console.log(距离浏览器位置,e.clientX,e.clientY)console.log(距离屏幕位置,e.screenX,e.screenY);}/script/body
/html在上述代码中我们可以看到我们HTML结构中只有一个id为circle的div并且給它设置了宽高和边框同时在js中我们添加了鼠标的点击事件onmousedown,那这个点击事件并没有根据某个元素进行绑定而是绑定在了整个浏览器中作为一个鼠标点击事件的监听当我们点击某个元素内值时候打印对应的clientX/clientY、offsetX/offsetY、screenX/screenY。会发现距离点击元素位置和距离浏览器位置永远都差大于等于8那是因为浏览器默认内外边距为8px所以说这也恰恰证明了在图文解说中说的是正确的。 注当我们鼠标点击事件中所在区域没有元素时默认offsetX和offsetY也为浏览器的距离
