помощь с кликом по событию

Question

Я разрабатываю HTML с этой структурой

div id="menuContainer">
    <div class = "menu ui-accordion-header ui-state-default ui-corner-all">
        <label class="formatText">Cliente</label><span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float: right"></span>
            <div class = "subMenu ui-accordion-header ui-state-default ui-corner-all">
                <ul class="options">
                    <li>
                        <label class="formatText">Ver Cliente</label><span class="ui-icon ui-icon-triangle-1-e" style="float: right"></span>
                            <div class = "subMenuRight ui-accordion-header ui-state-default ui-corner-all">
                                <ul class="options">
                                    <li>
                                        <label class="formatText">Por Nombre</label><span class="ui-icon ui-icon-triangle-1-e" style="float: right"></span>
                                            <div class = "subMenuRight ui-accordion-header ui-state-default ui-corner-all">
                                                <ul class="options">
                                                    <li><label class="formatText">sub sub menu</label></li>
                                                    <li><label class="formatText">prueba</label></li>
                                                </ul>
                                            </div>
                                    </li>
                                    <li>
                                        <label class="formatText">Por Campana</label>
                                    </li>
                                </ul>
                            </div>
                    </li>
                    <li>
                        <label class="formatText">Reportes para Cliente</label>
                    </li>
                </ul>
            </div>
    </div>
</div>

обратите внимание, что у основного div есть класс с именем menu, внутри есть несколько div с классами с именем subMenu иsubMenuRight, моя проблема в том, что я хочу связать клик по событию с отцом, а другое поведение - с детьми div, я пробовал вот так

$(".menu").click(function () {
    alert('click in the father');
});
$(".subMenu li").click(function () {
    alert('click in the first child');
});
$(".subMenuRight li").click(function () {
    alert('click in the second child');
});

Проблема с этим кодом в том, что div отец содержит детей divвсе обработчики событий сработали.Итак, мой вопрос: как я могу изменить селектор или проверить в обработчике событий, чтобы он запускал только тот элемент, на который нажали? *

Answer 1

используйте event.stopPropagation() для всех обработчиков кликов, например

$(".menu").click(function (e) {
    e.stopPropagation()
    alert('click in the father');
});

вот скрипка http://jsfiddle.net/yFFGS/

Answer 2

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

false в основном вызывает preventDefault и stopPropagation, которые будут рассмотрены ниже.

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

event.stopPropagation Запрещает родительским узлам «слышать» событие.Это, однако, позволит тегам привязки продолжать работать.Если вы не хотите, чтобы родитель .menu прослушал событие, это будет делать то, что вы ищете. Это технически наиболее правильно в этом случае .

event.stopImmediatePropagation вызывает stopPropagation и затем проверяет, что все прослушиватели, которые были добавлены после прослушивателя, которыйсобытие не сработает.

Answer 3

, если вместо этого вы используете .bind(), вы можете установить для переменной protectBubble значение false, чтобы предотвратить появление кликов у родительских элементов (http://api.jquery.com/bind/)

$(".menu").bind('click', function () {
    alert('click in the father');
}, false);
$(".subMenu li").bind('click', function () {
    alert('click in the first child');
}, false);
$(".subMenuRight li").bind('click', function () {
    alert('click in the second child');
}, false);

Answer 4

Как видно из HTML-кода, есть два li для каждого subMenu и subMenuRight. Возможно, вам следует использовать селектор :first в каждом случае:

$(".subMenu li:first").click(function () {
    alert('click in the first child');
});
$(".subMenuRight li:first").click(function () {
    alert('click in the second child');
});

Answer 5

$('#menuContainer')
    .delegate('.menu', 'click', function() {
        alert(1);
        return false;
    })
    .delegate('.subMenu li', 'click', function() {
        alert(2);
        return false;
    })
    .delegate('.subMenuRight li', 'click', function() {
        alert(3);
        return false; // this stops triggering events on parent els
    })

Answer 6

Если вы хотите остановить передачу событий, просто верните false из обработчика.

$(".menu").click(function () {
    alert('click in the father');
    return false;
});
$(".subMenu li").click(function () {
    alert('click in the first child');
    return false;
});
$(".subMenuRight li").click(function () {
    alert('click in the second child');
    return false;
});