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中运行良好，因为＆＃34; this＆＃34;变量设置为按钮我在toggleContent函数内单击。但是，在IE＆＃34;这个＆＃34;等于（默认）全局窗口/文档对象，当然调用.parentElement会产生null。为什么＆＃34;这个＆＃34;不是点击的按钮？

供参考，＆＃34;按钮＆＃34;我点击其实是一个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 +中运行良好，因为它将使用addEventListener，如Chrome和Firefox。 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。这不仅是错误的数字，而且无论如何都是不受限制的。

＆＃34;这＆＃34;在javascript中，Internet Explorer中的行为有所不同

2 个答案: