判断鼠标点击事件是否在某元素之上(万恶的srcElement)

本文介绍了解决Internet Explorer中event.srcElement与event.target不兼容的问题。通过两种方法实现目标元素的准确获取:一是利用坐标判断,二是尝试使用目标元素上的onclick事件。最终采用坐标法解决了事件触发时的目标定位问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本来event.target用得好好的,结果IE不支持,只有一个event.srcElement.

但是这两者只有区别的,target的话可以准确定位到事件触发的元素,顾名思义是目标嘛。

而srcElement有时却不尽人意,比方说有些情况是TABLE注册了事件,然后当事件触发时再用event对象来获取触发事件的Element,获取Element后再做逻辑判断来调用其他业务操作。

在这种比较复杂的情况之下往往很容易出现Element混淆的情况(指srcElement),拿到的不是目标事件的对象,而是注册事件的TABLE。如果是自己写的JavaScript还好,但如果不是的话,往往比较麻烦了,因为改动越多,就越有可能产生BUG。

无奈之下只好看看有没有办法解决IE下的这个问题。

想到的解决办法有两个。

1、用坐标解决,即判断目标元素的坐标范围和事件的鼠标坐标进行匹配。

2、在目标元素上添加onclick事件。

首先试了下第二种方法,结果也是为未能解决,原因是原来代码的业务问题,事件太多被其他事件覆盖或者混淆之类。所以只好跑回直接直观的第一种方法之上,虽然个人不太喜欢,因为比较土,但也没办法了。谁叫IE也是那么土。

具体代码如下:


var isClickEL = function(el){
if(!isIE()||!el)return false;
var coords = getCoords(el);
var elTop = coords.top;
var elBottom = 0;
var elLeft = coords.left;
var elRight = 0;
var elHeight = el.offsetHeight;
var elWidth = el.offsetWidth;
elBottom = elTop + elHeight;
elRight = elLeft + elWidth;

var ev = window.event;
if(!ev)return false;
var mouseX = ev.clientX;
var mouseY = ev.clientY;

var isInTheWidth = (mouseX>=elLeft && mouseX<=elRight);
var isInTheHeight = (mouseY>=elTop && mouseY<=elBottom);

return (isInTheWidth && isInTheHeight);
}

var getCoords = function(el){
var box = el.getBoundingClientRect(),
isQuirk = (document.documentMode) ? (document.documentMode==5) ? true : false : ((document.compatMode=="CSS1Compat") ? false : true),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top = box.top + (self.pageYOffset || !isQuirk && html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || !isQuirk && html.scrollLeft || body.scrollLeft) - clientLeft;
return { top: top, left: left };
};


getCoords方法是网上看到的,觉得还不错。而在坐标方面没有太精确,例如边框大小像素之类的,因为也不需要太精确。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值