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函數代碼

這是一個有效的例子

---

請注意 ，我已使用閉包來避免循環問題。 因為click事件函數在單擊時運行，所以這意味着它將使用i的當前值（而不是附加事件時設置的值）。 因此，無論您單擊哪個元素， i將始終等於array.length 。 這不僅是錯誤的數字，而且還是超出范圍的。