Question

我有两个代码，一个用于现代浏览器，如（IE9 +，ff，Ch等），另一个用于旧浏览器，如（ie6,7）。

适用于现代浏览器。

var elements = document.getElementsByTagName('p');
for (i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function () {
        this.style.backgroundColor = 'yellow';
    });
}

适用于旧浏览器（例如：ie6,7）

var elements = document.getElementsByTagName('p');
for (i = 0; i < elements.length; i++) {
    elements[i].attachEvent('onclick', function () {
        this.style.backgroundColor = 'yellow'; // here is the problem in `this` object.
    });
}

第一个代码工作正常，因为this正确返回一个对象。

但是第二个代码不能正常工作，因为this没有正确返回对象 IE 6,7中显示的错误消息：Unable to set value of the property 'backgroundColor': object is null or undefined

有什么问题？我该如何解决？

Answer 1

this未指向IE版本中的当前目标元素＆lt; 9

参考this.style.backgroundColor don't work in IE7/8

Answer 2

问题的解决方案 IE 6,7。

var elements = document.getElementsByTagName('p');
for (i = 0; i < elements.length; i++) {
    elements[i].attachEvent('onclick', function () {
        window.event.srcElement.style.backgroundColor = 'yellow';
    });
}

另一种方式。

var elements = document.getElementsByTagName('p');
var event = window.event;
for (i = 0; i < elements.length; i++) {
    elements[i].attachEvent('onclick', function (event) {
        event.srcElement.style.backgroundColor = 'yellow';
    });
}

`this`对象不返回对象

2 个答案: