首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议126:小心在元素内定位鼠标指针

关灯直达底部

要获取鼠标指针在元素内的坐标,目前还没有更稳妥的解决方案。使用offsetX和offsetY属性可以获取鼠标指针在元素内的坐标,但Firefox浏览器对此并不支持。不过可以选用layerX和layerY属性来兼容Firefox浏览器。代码如下:


var event=event||window.event;

if(event.offsetX||event.offsetY){

x=event.offsetX;

y=event.offsetY;

}

else if(event.layerX||event.layerY){

x=event.layerX;

y=event.layerY;

}


但是,layerX和layerY属性以绝对定位的父元素为参照物,而不是以元素自身为参照物,因此,如果没有绝对定位的父元素,则以document对象为参照物。为此,我们可以通过脚本动态添加或手动添加的方式来设计在元素的外层包围一个绝对定位的父元素,从而解决浏览器兼容问题。考虑到元素之间的距离所造成的误差,可以适当减去一个或几个像素的偏移量。例如:


<input type="text"id="text"/>

<span >

<p>鼠标跟随</p>

</span>

<script language="javascript"type="text/javascript">

var t=document.getElementById("text");

var p1=document.getElementById("p1");

p1.onmousemove=function(event){

var event=event||window.event;

if(event.offsetX||event.offsetY){

t.value=event.offsetX+""+event.offsetY;

}

else if(event.layerX||event.layerY){

t.value=(event.layerX-1)+""+(event.layerY-1);

}

}


这种做法能够解决在元素内部定位鼠标指针的问题,但在元素外面包裹一个绝对定位的元素会破坏整个页面的结构布局。在确保这种人为方式不会导致结构布局混乱的前提下,可以考虑选用这种方法,否则不建议使用这种方法。

由于浏览器的不兼容性,鼠标定位一直是一个难题。在JavaScript程序开发中,应该避免将鼠标定位作为事件触发的条件。例如,当鼠标经过某个元素时,不应该通过计算鼠标指针的坐标是否位于元素内部来触发事件,而应该通过元素的mouseover事件类型进行触发,或者通过焦点事件进行控制。