您的位置:澳门新葡8455最新网站 > 服务器运维 > JavaScript中获取鼠标位置相关属性总结_javascript技

JavaScript中获取鼠标位置相关属性总结_javascript技

发布时间:2019-12-31 04:27编辑:服务器运维浏览(122)

    javascript并不曾mouse对象,获取鼠标坐标要靠苍劲的event对象。

    我们通过监听document的mousemove,就足以实时获取鼠标地点。

    不过!!event10月鼠标相关的性质太多了,很令人头大!如下:

    event.layerX event.layerY event.clientX event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event.x event.y

    再就是他们的分别并不明显,各浏览器间还不宽容!

    那篇小说的目标即是搞明白他俩的界别,以致选出那三个不引入应用的。

    测量检验代码

    直白运转下列代码:复制代码 代码如下:

    显示结果

    屏内div

    相当的高很宽。。。

    屏外DIV

    测量试验进度中开掘三个神器:chrome和IE9全包容以上全部属性!用来比较他们就优秀低价了。

    各属性释义

    clientX与Y,是鼠标相对于浏览器视口的坐标;全部浏览器都扶植。

    screenX与Y,是鼠标相对于漫天显示器侧面的坐标,基本与document脱节了;全宽容。

    offsetX与Y,是鼠标绝对于前段时间所针对对象的坐标,鼠标那个时候本着开关,则offsetX是相持于那些按键;firefox不帮忙

    x与y,同标准浏览器的layerX与Y,是IE中能够用来取代layerX的性质

    pageX与Y,是鼠标相对于全体页面右侧的坐标,包含视口之外的;IE7,8不帮忙。

    重点:layerX与layerY

    layerX与Y是职业浏览器出的新属性,IE9也支撑。他得以用来代表offsetX与Y.不过,他的定义为:相对于当下本着成分方今的有稳固音信的要素的坐标。这么些“有定点”是指有非默肯定位的css属性。

    比如,当前针对的要素就有定位,那么layerX与Y就返拒却对于此成分的坐标;不然,就翻开此元素的父标签;仍旧不曾永久的话,就一而再一而再再而三;一向到根成分——html节点。

    就此,在firefox中,想要offsetX值,就非得插手position定位音讯!

    包容性总括:

    1,firefox不协理offsetX,offsetY与x,y属性,但一心能够用layerX取代他们;2,ie中的x,y相当于firefox&chrome中的layerX与layerY;3,ie7,8的document的境界与浏览器窗口的边界有2px的离开,所以在窗口最大化时screenX最小都有2px;4,ie9中的layerX与Y,就算有值,但却莫明其妙的不正确,貌似与html标签有关,例如小编的例证的代码,把滚动条拖到最左边,鼠标从环堵萧然稳步挪动到大DIV上,那时候大DIV的最右侧与第叁个DIV的最侧面的差值也会算进layerX中。。。后头成分更加的多,这么些总括就越复杂;而firefox与chrome的layerX则尚未那一个标题。所以,不要在IE9中选用layerX.5,在chrome中,x与y就算有值,可是是和clientX与Y完全相像! 所以,不建议使用x,y属性。

    宽容性补救

    正式浏览器中得以用position与event.layerX同盟来实现event.offsetX属性;

    IE7,8中没有pageX,pageY,只有用document.documentElement.scrollLeft+event.clientX来求出。

    之所以,IE中的x,y恐怕offsetX,offsetY能够去掉三个了。

    本文由澳门新葡8455最新网站发布于服务器运维,转载请注明出处:JavaScript中获取鼠标位置相关属性总结_javascript技

    关键词: