在IE中，Javascript中的"this"上下文丢失问题

Question

在IE中，Javascript中的"this"上下文丢失问题

3

以下代码在火狐/ Safari / Chrome 中运行良好，在IE中，“this”似乎失去了handleEvent()函数中的上下文...alert的结果是[object Window]，这不是我想要的；当从handleEvent()输出时，“this”需要引用HandleClick对象，而不是Window对象。

我是否遗漏了一些基本的东西导致在IE中出现这种情况？

<html>
<head>
<script type="text/javascript">
HandleClick = function(el) {
    this.element = document.getElementById(el);
    if( this.element.addEventListener ) {
        this.element.addEventListener("click", this, false);
    } else {
        if( this.element.attachEvent ) {
            this.element.attachEvent("onclick", this.handleEvent);
        }
    }
}
HandleClick.prototype = {
    handleEvent: function(e) {
        alert(this);
    }
}
</script>
</head>
<body onload="new HandleClick('logo')"></body>
</html>

- ahallerblu

1

很棒的第一个问题。欢迎来到SO！ - Chris Shouts

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user113716 · Accepted Answer

6

.attachEvent() 不会将元素作为 this 传递给您。您需要将处理程序封装在一个函数中，该函数从所附加的元素的上下文中调用它。

    if( this.element.attachEvent ) {
        var that = this;
        this.element.attachEvent("onclick", function() { 
                                              that.handleEvent.call( that.element );
                                           } );
    }

- user113716

我尝试了上面的建议，但是在这种情况下，that.handleEvent.call()（在ie中）似乎不能按预期工作；然而，that.handleEvent( that.element )可以正常工作。即使我成功调用了that.handleEvent()，它似乎也没有传递“event”（或“e”）参数。有什么建议吗？ - ahallerblu

@ahallerblu：在IE中对我来说很好用。你使用的是哪个版本？要将“event”对象作为参数传递到IE中，您需要引用“window.event”。所以我会更改调用方式为that.handleEvent.call( that.element, window.event );或者如果您不想使用.call()，而是想像您一样将元素作为参数传递，则只需添加event对象即可。that.handleEvent( that.element, window.event ) - user113716

我正在使用ie8。不管怎样，我不知道我可以那样使用window.event。最终我做了that.handleEvent(window.event,that)，因为使用.call对我来说没有正确传递第二个参数。 - ahallerblu

@ahallerblu：奇怪的是.call()不起作用。我得做些测试。无论如何，很高兴你找到了可行的东西。 - user113716