Question

我在Internet Explorer中遇到了一个奇怪的问题。当父母已经有点击事件时，将点击事件附加到元素的子元素似乎不起作用。

到目前为止，我已经获得了以下代码：

<span>Some text 
    <strong class="opts">
        <a href="#opt-action" rel="opt-data">Opt name</a>
    </strong>
</span>

我正在使用以下代码附加click事件侦听器（其中el是span）：

el.onclick = function()
{
    ..
}

var optWrapper = el.firstChild.nextSibling,
    opts = optWrapper.getElementsByTagName('a'),
    numOpts = opts.length;

for (var i = 0; i < numOpts; i++)
{
    var opt = opts[i],
        f =  null;

    switch (opt.getAttribute('href').split('#', 2)[1])
    {
        case '#opt-action':
            f = someFunction;
            break;
    }

    if (f !== null)
        opt.onclick = f;
}

someFunction调用stopEvent，其定义为：

var stopEvent = function(e)
{
    e  = e || event;

    // Stop bubbling
    if (e.stopPropagation)
        e.stopPropagation();
    else
        e.cancelBubble  = true;

    // Prevent the default action
    if (e.preventDefault)
        e.preventDefault();
    else
        e.returnValue = false;
}

和someFunction最后返回false。

有什么建议可能导致事件不对孩子们开火？

修改

如@Kevin Babcock所述firstChild确实是我的问题之一，第二个问题是IE中的href属性与在Firefox中检索href不同或谷歌浏览器。

如果我在IE中调用getAttribute('href')，我会获得绝对网址，在Firefox和Google Chrome中，我会获得相对网址。我已更新代码以在href上分割#。

上面显示的代码是动态加载的。加载完成后，执行数据中的任何javascript，我认为我的问题是IE 没有加载脚本。

Answer 1

这一行是你的问题：

var optWrapper = el.firstChild

由于您的<span>元素后面紧跟着“某些文字”，因此在其上调用firstChild()的结果将是TextNode元素。随后，在getElementsByTagName()元素上未定义TextNode。

相反，这样做：

var opts = el.getElementsByTagName("a"),
    numOpts = opts.length;

以下是您可以放入页面以获得所需结果的完整来源：

(function(){
    var stopEvent = function(e) {
        console.log("stopEvent called");
        e  = e || event;

        // Stop bubbling
        if (e.stopPropagation)
            e.stopPropagation();
        else
            e.cancelBubble  = true;

        // Prevent the default action
        if (e.preventDefault)
            e.preventDefault();
        else
            e.returnValue = false;
    }

    var someFunction = function(e) {
        console.log("someFunction called");
        stopEvent(e);
    };

    var span = document.getElementsByTagName("span")[0];
    span.onclick = function() {
        console.log("span clicked");
    };

    var opts = span.getElementsByTagName("a"),
        numOpts = opts.length;

    for (var i = 0; i < numOpts; i++) {
        var opt = opts[i],
            f =  null;

        switch (opt.getAttribute('href')) {
            case '#opt-action':
                f = someFunction;
                break;
        }

        if (f !== null)
            opt.onclick = f;
    }
})();

Javascript onclick on children

1 个答案: