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

作者:纸飞机

时间:2026-10-24

浏览:238

本文解析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';
} 
} 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章