本来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方法是网上看到的,觉得还不错。而在坐标方面没有太精确,例如边框大小像素之类的,因为也不需要太精确。
分享到:
相关推荐
event和srcElement说明,方法,技巧.doc
只要在外层上写一个 然后检查event.srcElement.tagName或其他属性是不是你想要的来决定是否响应事件就可以了.不过好像event.srcElement在ff里不起作用 比如 span div event对象指当前触发的事件对象, window.event...
只要在外层上写一个 然后检查event.srcElement.tagName或其他属性是不是你想要的来决定是否响应事件就可以了.不过好像event.srcElement在ff里不起作用 比如 <input value="input"> <span>span</span></...
Javascript小技巧,觉得用来查询JS的事件挺方便,主要是事件源对象event.srcElement.tagName ,event.srcElement.type,捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键event...
offsetX 属性用于返回鼠标在事件源元素中的 X 坐标。语法:event.offsetX 注释:这是个只读属性。 offsetY 属性 offsetY 属性用于返回鼠标在事件源元素中的 Y 坐标。语法:event.offsetY 注释:这是个只读属性。 ...
然后,我们使用 if 语句来判断点击的元素是否是一个超链接(A 链接),如果是,则执行相应的处理代码。在本例中,我们使用 alert 函数来弹出一个警示框,提示用户点击了链接。 在理解本例代码之前,需要了解 ...
在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息,思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的...
在开发中总是忘记,特意在此记录 关键字: $event (index,$event)>{{item.BedID}} {{item.CriminalName}} updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 } PS:下面看下v-on...
事件委托 事件委托: 事件代理, 将子节点要做的事情交给父元素来做 原理: 将原来要给子元素添加的事件, 加给父元素, 事件中通过 target || srcElement 找到对应的子节点, 子节点处理具体的操作 优点: 避免使用for ...
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event....
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event....
例如鼠标点击的时候,自己就会产生比如点击的类型啊 还要那个元素发出的 dom 事件对象 type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的...
事件源对象 event.srcElement.tagName event.srcElement.type •捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); •事件按键 event.keyCode event.shiftKey event.altKey ...
• 鼠标位置 event.x event.y • 窗体活动元素 document.activeElement • 绑定事件 document.captureEvents(Event.KEYDOWN); • 访问窗体元素 document.all("txt").focus(); document.all("txt").select()...
子元素的事件交给父元素去处理 语法 事件对象.target (精准的事件源) 在低版本Ie的语法: 事件对象.srcElement 兼容写法: var target = e.target || e.srcElement;//e为事件对象 事件委托的好处: 1.提高...
• 根据鼠标获得元素: document.elementFromPoint(event.x,event.y).tagName=="TD document.elementFromPoint(event.x,event.y).appendChild(ms) • 窗体图片 document.images[索引] • 窗体事件绑定 ...
本文实例讲述了JS实现的表格行鼠标点击高亮效果代码。分享给大家供大家参考,具体如下: 偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效) [removed] var ...