e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY的区别

原创 chen0517 随笔 JavaScript 207阅读 2018-01-20 19:15:38 举报

昨天没有更新内容,本来打算今天做个使用h5实现拖拽的效果,可惜家里的电脑出了点问题,所以今天就把几个事件鼠标的属性再学习一下。‘
1.offsetX和offsetY是相对于事件源的x和y位置。简单点说就鼠标相对于自己这个元素的左上角的距离。
参照其他大神的博客,部分浏览器相对的值是不一样的区别是:在chrome opera, safari中是指外边缘,即把该元素边框的宽度计算在内,firefox ie则不包含边框值。如下图所示

e.clientX,e.clientYe.pageXe.pageYe.offsetXe.offsetY的区别
2.clientX和clientY是相当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标和垂直坐标
3.pageX和pageY可视窗口与文档窗口重叠,pageX等于clientX, pageY等于clientY,
如果我们缩小浏览器窗口直到浏览器出现滚动条。此时可视窗口左上角位置不变,但文档窗口左上角位置发生的变化。如图所示

e.clientX,e.clientYe.pageXe.pageYe.offsetXe.offsetY的区别

e.clientX,e.clientYe.pageXe.pageYe.offsetXe.offsetY的区别
4.layerX和layerY是相对于position为absolute或relative的父元素胡外边缘的距离。ie8及ie8之前的版本没有layerX或layerY值。

如下图:最外层是一个绿色边框的div,里面一层是一个红色边框的div, 最里面是一个蓝色边框的div, 在蓝色div上单击,则该事件的layerX与layerY相相对于最外层绿色外边缘的距离(中间红色的div的position设有被设置为absolute或relative, 所有不是相对该元素,反之则是相对于该元素)。

e.clientX,e.clientYe.pageXe.pageYe.offsetXe.offsetY的区别

参考链接:http://blog.csdn.net/yang_chuanlong/article/details/49232945

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复