帮助事件点击

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的类，我的问题是我想将事件单击与父亲联系起来，并将其他行为与我尝试过的divs孩子联系起来这个

$(".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父亲包含所有触发了事件处理程序的divs子级。 所以我的问题是如何修改选择器或验证事件处理程序中的，以仅触发被单击的确切元素？

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的父.menu收听该事件，否则它将满足您的期望。 从技术上讲，这是最正确的情况 。

event.stopImmediatePropagation调用stopPropagation，然后确保在触发该事件的侦听器之后添加的所有侦听器均不会触发。

Answer 3

如果要停止事件冒泡，只需从处理程序返回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;
});

Answer 4

$('#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 5

从html代码可以看出， subMenu和subMenuRight分别具有两个li 。 也许在每种情况下都应使用:first选择器：

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

Answer 6

如果使用.bind()则可以将preventBubble变量设置为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);