как я могу остановить всплытие событий без метода stopPropagation

есть такой html-код:

<ul>
    <li id='root' class='tree-node'>
      root
      <ul>
        <li class='tree-node' id='node1'>node1</li>
        <li class='tree-node' id='node2'>node2</li>
        <li class='tree-node' id='node3'>node3</li>
        <li class='tree-node' id='node4'>node4
            <ul>
                <li class='tree-node' id='node4-1' >node4-1</li>
                <li class='tree-node' id='node4-2' >node4-2</li>                    
            </ul>
        </li>
      </ul>
    </li>

<ul>

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

а также привязка события клика к документу

вот мой код:

$(".tree-node").click(function(e){
    console.log($(this).attr("id"));
});

$(document).click(function(e){
    console.log("document clicked!");   
});

Есть ли альтернатива для stopPropagation(), чтобы остановить передачу событий от node4-2 к его родителям?

скрипка: http://jsfiddle.net/R6ySc/


javascript jquery event-bubbling stoppropagation
person Siami    schedule 29.10.2012    source источник
comment
Почему вы не хотите использовать stopPropagation?   -  person Adil    schedule 29.10.2012
comment
потому что я хочу вызвать событие щелчка документа   -  person Siami    schedule 29.10.2012

Ответы (1)


arrow_upward
6
arrow_downward

Вы можете просто использовать событие щелчка документа и обрабатывать все оттуда.

$(document).click(function(e){
    console.log("document clicked!");    
    var t = $(e.target);
    if(t.attr("class") == "tree-node") {
        console.log("tree node clicked");
    }
});​

Проверьте эту скрипту: http://jsfiddle.net/R6ySc/3/

в качестве альтернативы вы также можете указать селектор в событии onclick для документа (см. документацию по jQuery). для этого):

$(document).on("click", ".tree-node", function(e) {
    e.stopPropagation();
    console.log("tree node '" + $(this).attr("id") + "' clicked");
});​

для справки, проверьте комментарии ниже

person Reinder Wit    schedule 29.10.2012
comment
Более традиционно (начиная с jQuery 1.7) вы можете использовать $.(document).on('click', '.tree-node', function(){...}), и в этом случае выбранный узел отображается как this внутри функции. - person Beetroot-Beetroot; 29.10.2012
comment
@Beetroot-Beetroot: хорошая мысль. Однако я попробовал это в скрипке (jsfiddle.net/R6ySc/4), а затем есть распространение выпуск снова. Кроме того, обычный щелчок по документу (вне дерева) больше не обрабатывается... - person Reinder Wit; 29.10.2012
comment
Рейндер, однозначно да. Событие действительно запустится вверх по дереву DOM, когда оно всплывет. Моя точка зрения была неполной. Я должен был добавить, что вы можете (при необходимости) отклонять нецелевые клики в обработчике, тестируя (this == e.target). См. обновленную скрипту. И обычный щелчок по документу (вне дерева) совершенно корректно не обрабатывается. - person Beetroot-Beetroot; 29.10.2012
comment
Более того, e.stopPropagation() предотвратит срабатывание события на элементах, отличных от цели. Возможно, это противоречит здравому смыслу, так как событие должно было всплыть, чтобы document обрабатывало щелчок в первую очередь! См. jsfiddle.net/R6ySc/6. - person Beetroot-Beetroot; 29.10.2012
comment
OP явно просит не использовать e.stopPropagation() , так как же получить идентификатор, нажатый в первом примере (он все еще всплывает)? - person HenryW; 22.09.2014
comment
я проголосовал за быстро и не могу отменить, однако, за кулисами все еще есть пузыри, но 0 побочных эффектов :) - person HenryW; 22.09.2014