请问event.currentTarget在IE8-中如何获取呢?
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
查询MDN官网,发现event.currentTarget不兼容IE8-(IE8及以下版本的IE浏览器)。
请问应该如何写兼容性方法呢?老师可以给个思路吗?
正在回答 回答被采纳积分+1
我的完整代码如下。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>2-17-event.currentTarget的兼容性</title> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <base target="_blank"> <style type="text/css"> body { margin: 0; padding: 0; background-color: #DCDCDC; } #ulList {width: 100px;} #ulList > li { width: 100px; height: 30px; line-height: 30px; } #ulList > li + li {border-top: 1px solid red;} </style> <script type="text/javascript"> window.onload = function () { // 浏览器分为以下两派 // 主流派:Chrome、Firefox、Opera、Safari、Edge、IE9+ // 老旧派:IE8- var EventUtil = { // 事件绑定 addListener: function (target, type, listener) { if (target.addEventListener) { target.addEventListener(type, listener); } else if (target.attachEvent) { target.attachEvent("on" + type, listener); } else { target["on" + type] = listener; } }, // 事件解绑 removeListener: function (target, type, listener) { if (target.removeEventListener) { target.removeEventListener(type, listener); } else if (target.detachEvent) { target.detachEvent("on" + type, listener); } else { target["on" + type] = null; } }, // 事件触发的目标对象 getEventTarget: function (event) { return event.target || event.srcElement; }, // 事件绑定的目标对象 getEventCurrentTarget: function (event) { return event.currentTarget; }, // 禁止默认行为 preventDefault: function (event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 阻止事件冒泡和捕获 stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }; var ulList = document.getElementById("ulList"); // 点击每一项li,弹出事件绑定的元素的id:ulList // 以下代码经测试,不兼容IE8- EventUtil.addListener(ulList, "click", function (event) { alert((EventUtil.getEventCurrentTarget(event) || this).id); }); } </script> </head> <body id="body"> <ul id="ulList"> <li id="li1">item 1</li> <li id="li2">item 2</li> <li id="li3">item 3</li> <li id="li4">item 4</li> <li id="li5">item 5</li> <li id="li6">item 6</li> </ul> </body> </html>
经测试,alert((EventUtil.getEventCurrentTarget(event) || this).id); 不兼容IE8-。这里IE8-是指IE8以及更低版本的IE浏览器。
IE8、IE7和IE5的运行结果如下,显示undefined,而不是ulList。因此,问题未解决,请老师指点。
IE9+的运行结果如下,显示ulLIst,得到预期结果。
你好同学,解答如下:
1.var et = e || evet; 确实多余,你那样写可以。
2. 首先如下兼容性写法不对,this指向函数的调用者。
代码中,getEventCurrentTarget方法是EventUtil调用的,所以如上this指向的不是事件绑定的对象,而是EventUtil。
如果想要通过this兼容,应该在事件中写this。因为事件处理函数是目标对象触发的:
先把getEventCurrentTarget中去掉
然后在事件中通过this获取:
3.第二个只是给同学讲解了一下this的指向问题,在本代码中,解决ie10兼容问题很简单,就是通过传递event参数。
虽然代码中不传递也会有event对象,但是在ie10下,这个event是没有currentTarget属性的。所以打印undefined。需要如下定义参数,然后传递过去再使用才行。(每一个事件中,都应该先定义event参数,然后再使用才规范哦)
然后在ie10中就可以获取id了哦
祝学习愉快,望采纳。
event.currentTarget的浏览器兼容性,我的代码如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>2-17-event.currentTarget的兼容性</title> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <base target="_blank"> <style type="text/css"> body { margin: 0; padding: 0; background-color: #DCDCDC; } #ulList { width: 100px; } #ulList > li { width: 100px; height: 30px; line-height: 30px; } #ulList > li + li { border-top: 1px solid red; } </style> <script type="text/javascript"> window.onload = function () { // 浏览器分为以下两派 // 主流派:Chrome、Firefox、Opera、Safari、Edge、IE9+ // 老旧派:IE8- var EventUtil = { // 事件绑定 addListener: function (target, type, listener) { if (target.addEventListener) { target.addEventListener(type, listener); } else if (target.attachEvent) { target.attachEvent("on" + type, listener); } else { target["on" + type] = listener; } }, // 事件解绑 removeListener: function (target, type, listener) { if (target.removeEventListener) { target.removeEventListener(type, listener); } else if (target.detachEvent) { target.detachEvent("on" + type, listener); } else { target["on" + type] = listener; } }, // 事件触发的目标对象 getEventTarget: function () { return event.target || event.srcElement; }, // 事件绑定的目标对象 getEventCurrentTarget: function () { return event.currentTarget || this; }, // 禁止默认行为 preventDefault: function () { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 阻止事件冒泡和捕获 stopPropagation: function () { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }; var ulList = document.getElementById("ulList"); // 点击每一项li,弹出对应的内容 // 事件触发的目标是li元素,但是事件绑定的目标却是ul元素 // 这就是事件委托 // 以下代码经过测试,兼容两派的浏览器 // EventUtil.addListener(ulList, "click", function () // { // alert(EventUtil.getEventTarget().innerHTML); // }); // 点击每一项li,弹出事件绑定的目标的id:ulList // 以下代码经测试,不兼容IE10- EventUtil.addListener(ulList, "click", function () { alert(EventUtil.getEventCurrentTarget().id); }); } </script> </head> <body id="body"> <ul id="ulList"> <li id="li1">item 1</li> <li id="li2">item 2</li> <li id="li3">item 3</li> <li id="li4">item 4</li> <li id="li5">item 5</li> <li id="li6">item 6</li> </ul> </body> </html>
点击每一项列表项li,在IE10-弹窗显示undefined,而不是事件绑定的对象的id:ulList。
请问这应该如何解决呢?getEventCurrentTarget的方法如何才能做到两派兼容?
上图中红色方框的写法是多余吗?
为什么不直接写成如下:
list.onclick = function () { if (event.currentTarget) { event.currentTarget.style.backgroundColor = "red"; } else { this.style.backgroundColor = "red"; } }
同学你好, 因为js语规定,绑定事件函数传入的第一个参数就表示事件对象,所以这里的参数e就是代表事件对象(event), 又因为这里是个形参,所以可以任意命名,只要在函数内部使用名称一致即可
详细信息可以参考MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Event
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星