javascript 中的“this”在 Internet Explorer 中的行为不同

Question

我有以下功能：

function toggleContent()
{
    var parent = this.parentElement;

    toggleClass(parent,"detailsAreVisible");
}

当用户单击某个按钮时，将调用此函数。绑定发生在普通的 javascript 中，如下所示：

var allTogglingButtons = document.querySelectorAll("[unhideicon],[hideicon]");
crossBrowserAddClickEvent(allTogglingButtons, toggleContent);

crossBrowserAddClickEvent 函数是修复另一个 IE 问题所必需的：

function crossBrowserAddClickEvent(array, functionName)
{   
    for(var i=0; i < array.length; i++)
    {
        if (array[i].addEventListener)
        {
            aray[i].addEventListener('click', functionName); 
        }
        else if (array[i].attachEvent)
        {
            array[i].attachEvent('onclick', functionName);
        }   
    }
}

这在 chrome 和 firefox 中运行良好，因为“this”变量设置为我在 toggleContent 函数内单击的按钮。但是，在 IE 中，“this”等于（默认）全局窗口/文档对象，当然在其上调用 .parentElement 会产生 null。为什么“this”不是点击按钮？

作为参考，我点击的“按钮”实际上是一个 svg 元素：

<svg unhideicon class="svgIcon">    ....    </svg>

Answer 1

这是一个众所周知的 Exlorer 问题 你必须使用 EVENT 对象来获取你的调用者

function toggleContent(e)
{
    var event = e || window.event;
    var parent = (event.target || event.srcElement).parentElement;

    toggleClass(parent,"detailsAreVisible");
}

Answer 2

实际问题不是因为 IE，而是因为 attachEvent 与 addEventListener 的不同之处。您应该注意到您的代码在 IE9+ 中运行良好，因为它将像 Chrome 和 Firefox 一样使用 addEventListener。由于 IE8 使用 attachEvent，所以需要进行一些不同的处理。

我的建议是您使用call 来调用该函数，这样您就可以定义this 是什么，在这种情况下您可以告诉它是您将事件附加到的元素：

// other code.
else if (array[i].attachEvent)
{
    var element = array[i];
    (function (el){
        el.attachEvent('onclick', function () {
            functionName.call(el);
        });
    })(element);
}

使用此方法意味着您不必更改您的toggleContent功能代码

Here is a working example

---

注意，我使用闭包来避免循环出现问题。因为单击事件函数在单击时运行，这意味着它将使用i 的当前值（而不是附加事件时设置的值）。因此，无论您单击哪个元素，i 将始终等于array.length。这不仅是错误的数字，而且无论如何都超出了范围。