JavaScript中offsetX与layerX的区别及兼容处理

作者:纸飞机时间:2026-10-24 16:56:03浏览:239

本文解析JavaScript中offsetX与layerX属性的区别,重点介绍在IE等旧版浏览器中获取鼠标相对于事件源坐标的兼容写法。通过判断鼠标点击位置是否超过元素宽度的一半,实现简单的左右区域判定逻辑,适用于图片轮播翻页等场景。

offsetX与layerX的兼容性处理

这是一个基础示例,用于判断鼠标指针位于事件源元素的左侧还是右侧,该逻辑常用于实现点击图片自动翻页的功能。


具体实现代码如下:

 
function GetMousePosStr (evnt,ele)
{ 
if(!evnt)
{ 
evnt = window.event;
} 
var offsetX = evnt.offsetX ? evnt.offsetX : evnt.layerX;
if(evnt.offsetX < ele.offsetWidth / 2)
{ 
return 'left';
} 
else
{ 
return 'right';
} 
} 
作者最新文章