Javascript onclick на детей

Question

У меня странная проблема в Internet Explorer. Присоединение события click к дочерним элементам, когда у родителя уже есть событие click, похоже, не работает.

Пока у меня есть следующий код:

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

Я присоединяю прослушиватель события щелчка со следующим кодом (где 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 в конце.

Какие-либо предложения, что может быть причиной того, что событие не вызвало пожар у детей?

EDIT:

Как заметил @ Кевин Бабкок firstChild действительно была одной из моих проблем, вторая проблема заключалась в том, что атрибут href в IE отличается от получения href в Firefox или Google Chrome.

Если я позвоню getAttribute('href') в IE, я получу абсолютный URL, а в Firefox и Google Chrome я получу относительно URL. Я обновил код, чтобы разделить 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;
    }
})();