Проблема с event.stopPropagation () и onClick (jQuery)

Question

Я написал этот фрагмент кода несколько лет назад, и в то время он работал в FF & Chrome, но теперь он приводит к бесконечному циклу в Chrome.

<script>
    function clickChildLink(el, event) {
        console.log('inside function');
        var evtTarget = $(event.target);
        if (evtTarget.is('a')) {
            console.log('returning');
            return; //ignore clicks if its a link
        }
        $(el).children('a').click();
}
</script>

<div onclick="clickChildLink(this, event);">  
    <a href="#" onclick="console.log('before'); event.stopPropagation(); console.log('after'); return false;">Header</a>
</div>  

Вы можете запустить код здесь: http://jsfiddle.net/Py7Mu/205/

По сути, это то, что он должен делать, если пользователь щелкает внутри div (то есть в заголовке), он находит ссылку внутри него и вызывает щелчок по нему. В Chrome этот вызванный щелчок также распространяется обратно к родителю, который, в свою очередь, снова запускает весь процесс.

Я знаю, что должен использовать менее навязчивый javascript, но это происходит из-за старого приложения rails (надеюсь, обновление будет достаточно скоро).

Есть идеи, почему событие не перестает распространяться? Технически код должен работать без вызова stopPropagation, так как оператор if внутри функции должен остановить последующие вызовы от запуска. По-видимому, Chrome не обновляет currentTarget при программном вызове клика

Answer 1

Похоже, это вызвано встроенными обработчиками событий. Если вы прикрепите их с помощью jQuery, onDomReady, он должен работать, а еще лучше - кросс-браузер (ваш текущий скрипт не будет работать в IE <9). Кроме того, вам не нужна проверка привязки внутри вашего обработчика событий, если вы можете правильно остановить распространение. </p>

Попробуйте это:

$(function(){

    $(div).click(function(){
        $(this).children('a').click();
    });

    $(a).click(function(e){
        e.stopPropagation();
    });

});

Answer 2

если есть только один дочерний якорь, не могли бы вы просто сделать что-то вроде ...

$(el).click(function(){
    if (this.tagName !== 'A') 
        this.getElementsByTagName('A')[0].click();
});

или я думаю, если он вложен дальше ...

$(el).click(function(){
    if (this.tagName !== 'A') 
        $('a', this)[0].click();
});