很多时候,我们都需要获取event.offsetX数值,但是Firefox的event不支持offsetX属性,这给我们造成了一定的困难,虽然Firefox提供了一个layerX属性,但是该属性需要和CSS的position属性配合才能获取我们想要的数值,这是个比较大的局限,他限制了页面样式的设计,而且,layerX的数值严格意义上并不等同于offsetX,offsetX是相对于元素的内边距,而layerX是相对于外边距,这时如果边框较宽,两者取值会有误差,或者说,需要减去边框的宽度。
在网上经过搜索,大部分的方案都是通过offsetParent逐级计算,或者利用jQuery的$(e.target).offset().left进行计算,要么无法适应有滚动条的情况,要么依赖第三方库,有没有更简单的办法呢?
经过研究,找到了如下的计算方法,非常简单:
function getOffsetX(event){
var evt =event||window.event;
var srcObj = evt.target || evt.srcElement;
if (evt.offsetX){
return evt.offsetX;
}else{
var rect = srcObj.getBoundingClientRect();
var clientx = evt.clientX;
return clientx - rect.left;
}
}
或者用一行代码:
return evt.offsetX || (evt.clientX - srcObj.getBoundingClientRect().left);
这个计算方法,在IE8以上,Firefox、Chrome等浏览器上,都测试通过,在一些复杂的页面环境中,包括横向滚动条,测试结果也都正确。