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的类，里面有一些带有subMenu和subMenuRight类的div，我的问题是我想要关联事件点击父亲和其他行为给我试过的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 children所有事件处理程序都被触发了。所以我的问题是如何修改选择器或在事件处理程序中验证只触发被点击的确切元素？

Answer 1

对所有点击处理程序使用event.stopPropagation()，例如

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

这里是小提琴http://jsfiddle.net/yFFGS/

Answer 2

你一定要看here查看不同选项的大纲。

false基本上会调用preventDefault和stopPropagation，这将在下面进行处理。

preventDefault停止事件的默认行为 - 在这种情况下，它可以阻止锚点发射。您不会非常关注当前示例中的此行为，因为您实际上并不是

event.stopPropagation防止父节点“听到”该事件。但是，它将允许锚标记继续工作。除非您希望.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代码中可以看出，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 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);

帮助点击事件

6 个答案: