请问event.currentTarget在IE8-中如何获取呢?

请问event.currentTarget在IE8-中如何获取呢?

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

查询MDN官网,发现event.currentTarget不兼容IE8-(IE8及以下版本的IE浏览器)。

http://img1.sycdn.imooc.com//climg/5da04902087d8d4010580518.jpg

请问应该如何写兼容性方法呢?老师可以给个思路吗?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

7回答
_是你_ 2019-10-15 19:09:15

ie8不支持currentTarget,只能使用srcElement ,不过它获取的是事件触发的目标对象。我之前查过大量的资料,你说的这个问题ie8的真没有解决方案呢,我估计以前也很少用这个吧。 可以抖机灵用parentNode去获取一下父节点哈哈~~。不过现在谁还考虑ie8 ,公司都不考虑了,浪费这么多时间研究ie8不值得鸭。你考虑ie8以上的就行。看老师的那个兼容就行了吧

http://img1.sycdn.imooc.com//climg/5da5a7530926b17006570058.jpg

提问者 我学习太差被关起来了 2019-10-15 11:19:52

我的完整代码如下。

<!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。因此,问题未解决,请老师指点。

http://img1.sycdn.imooc.com//climg/5da53a570a67416017320950.jpg

IE9+的运行结果如下,显示ulLIst,得到预期结果。

http://img1.sycdn.imooc.com//climg/5da53a880a42fbfa17320950.jpg

好帮手慕夭夭 2019-10-14 23:10:18

你好同学,解答如下:

1.var et = e || evet; 确实多余,你那样写可以。

2. 首先如下兼容性写法不对,this指向函数的调用者。

http://img1.sycdn.imooc.com//climg/5da48bec0911415d06050180.jpg

代码中,getEventCurrentTarget方法是EventUtil调用的,所以如上this指向的不是事件绑定的对象,而是EventUtil。

http://img1.sycdn.imooc.com//climg/5da48c2909cd638907260084.jpg

如果想要通过this兼容,应该在事件中写this。因为事件处理函数是目标对象触发的:

先把getEventCurrentTarget中去掉

http://img1.sycdn.imooc.com//climg/5da48d6509f4afb106610181.jpg

然后在事件中通过this获取:

http://img1.sycdn.imooc.com//climg/5da48d9609205f1908510140.jpg

3.第二个只是给同学讲解了一下this的指向问题,在本代码中,解决ie10兼容问题很简单,就是通过传递event参数。

虽然代码中不传递也会有event对象,但是在ie10下,这个event是没有currentTarget属性的。所以打印undefined。需要如下定义参数,然后传递过去再使用才行。(每一个事件中,都应该先定义event参数,然后再使用才规范哦)

http://img1.sycdn.imooc.com//climg/5da48f59090fbfbe09610166.jpg

http://img1.sycdn.imooc.com//climg/5da48f8a091069fe07800178.jpg

然后在ie10中就可以获取id了哦

http://img1.sycdn.imooc.com//climg/5da48fc009a2578a11980412.jpg

祝学习愉快,望采纳。

  • 谢谢老师回答。不过问题还是未解决,以下这句代码不能兼容所有的IE:alert((EventUtil.getEventCurrentTarget(event) || this).id); 我随后开辟一个新回答,详细说明问题。
    2019-10-15 11:08:15
提问者 我学习太差被关起来了 2019-10-13 22:38:24

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的方法如何才能做到两派兼容?

提问者 我学习太差被关起来了 2019-10-13 22:05:30

http://img1.sycdn.imooc.com//climg/5da32e8408c6129910320559.jpg上图中红色方框的写法是多余吗?

为什么不直接写成如下:

list.onclick = function ()
{
   if (event.currentTarget)
   {
      event.currentTarget.style.backgroundColor = "red";
   }
   else
   {
      this.style.backgroundColor = "red";
   }
}


好帮手慕慕子 2019-10-12 14:14:26

同学你好, 因为js语规定,绑定事件函数传入的第一个参数就表示事件对象,所以这里的参数e就是代表事件对象(event), 又因为这里是个形参,所以可以任意命名,只要在函数内部使用名称一致即可

http://img1.sycdn.imooc.com//climg/5da14c640992025512100686.jpg

详细信息可以参考MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Event 

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 原来如此,第一个参数就是event。那么图片中的写法:var et = e || evet; 不就是多余吗?
    2019-10-13 22:02:20
好帮手慕慕子 2019-10-11 18:03:00

同学你好, 首先我们要清楚currentTarget执行的是事件绑定的元素, 示例:

http://img1.sycdn.imooc.com//climg/5da0522e0947079807670101.jpg

既然IE8不支持这个方法, 那么可以通过this,代替这个方法, 执行当前被点击的元素。 示例:

http://img1.sycdn.imooc.com//climg/5da052fa09982bc710770669.jpg

测试结果:

chrome中测试, 

http://img1.sycdn.imooc.com//climg/5da0530109500fd202260215.jpg

IE中测试

http://img1.sycdn.imooc.com//climg/5da0532b09563df811820411.jpg

综上所述,都可以给ul设置样式哦

同学可以自己下去测试一下

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师