&引用；这"；在javascript中，Internet Explorer中的行为不同

我有以下功能：

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);
        }   
    }
}

函数交叉浏览AddClickEvent（数组、函数名）
{   
对于（var i=0；i

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

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

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

。。。。

这是众所周知的Exlorer问题 您必须使用事件对象来获取调用者

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

    toggleClass(parent,"detailsAreVisible");
}

---

这是众所周知的埃克洛勒问题 您必须使用事件对象来获取调用者

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

    toggleClass(parent,"detailsAreVisible");
}

---

实际问题不是因为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

功能代码

---

---

注意我使用了闭包来避免循环出现问题。因为单击事件函数在单击时运行，这意味着它将使用当前值

i

（而不是附加事件时设置的值）。因此，无论单击哪个元素，

i

始终等于

array.length

。这不仅是错误的数字，而且无论如何都是不允许的。

实际问题不是因为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

功能代码

---

---

---

注意我使用了闭包来避免循环出现问题。因为单击事件函数在单击时运行，这意味着它将使用当前值

i

（而不是附加事件时设置的值）。因此，无论单击哪个元素，

i

始终等于

array.length

。这不仅是错误的号码，而且无论如何都是不允许的。

为什么需要

。attachEvent

？这是最后一个不支持svg的版本，我们将很快用img替换svg，因为这是第一件事：）我仍然很好奇。。。如前所述，自版本9起，IE仅支持SVG。那么为什么需要使用

.attachEvent

？IE9+支持

.addEventListener

为什么需要

.attachEvent

？这是最后一个不支持svg的版本，我们将很快用img替换svg，因为这是第一件事：）我仍然很好奇。。。如前所述，自版本9起，IE仅支持SVG。那么为什么需要使用

.attachEvent

？IE9+支持

.addEventListener

在

窗口中没有
.target
属性。您必须改用
event.srcement
，而且
e
中没有
.srcement
。不是每件事都能在一行中完成…；）@Andreas'bout
（e&&e.target | | | window.event.srcElement）。parentElement
？因为它更像是忍者编码器xD@Andreas哦，我并不是真的推荐它作为一种方法——我（几乎）每次都会追求可读性——“不是每件事都能在一行中完成”听起来像是一个挑战；）
窗口中没有
.target
属性。事件
。您必须改用
event.srcement
，而且
e
中没有
.srcement
。不是每件事都能在一行中完成…；）@Andreas'bout
（e&&e.target | | | window.event.srcElement）。parentElement
？因为它更像是忍者编码器xD@Andreas哦，我并不是真的推荐它作为一种方法——我（几乎）每次都会追求可读性——“不是每件事都能在一行中完成”听起来像是一个挑战；）<当触发
单击
事件时，code>array[i]

将

未定义

，因为

i

将超出范围使用“i”变量和脚本片段可能会引起注意，变量在声明后可能会更改，调用时，i=最后一个值我感到困惑。我认为Javascript在调用“addClickEvent”函数时会放入正确的array[I]对象，为什么它会在我实际单击时尝试计算array[I]呢？Musefan，您的解决方案还需要放入if/else的另一部分（带有addEventListener而不是AttachEvent的部分），由于IE 9+@user1884155

的缘故，当
单击时，数组[i]
将
未定义