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

阅读更多

本来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方法是网上看到的，觉得还不错。而在坐标方面没有太精确，例如边框大小像素之类的，因为也不需要太精确。