0

我试图弄清楚如何在单击特定元素时阻止单击事件冒泡、冒泡、冒泡。

<div class="clickable">
   clicking here shouldn't affect parents or children
    <div class="clickable">
       clicking here shouldn't affect parents or children
        <div class="clickable">
            clicking here shouldn't affect parents
        </div>
    </div>
</div>

基本上，如果单击具有“可点击”类的元素，我只希望该项目受到影响，切换偶数/奇数类。

这是小提琴：http: //jsfiddle.net/LDaA7/

当您运行小提琴并单击特定项目时，您会看到各种父母和孩子也被切换。

通过实验，event.stopPropagation()、返回 false/true、.one 等会影响点击事件，而不是目标本身。我可能希望其他（不相关的）点击事件起作用。

如何仅定位我单击的元素？

4

2 回答 2

1

您可以检查目标是否等于绑定元素 ( this)：

$("body").on "click", ".clickable", (event) ->
    if this is event.target
        clickTarget = $(event.currentTarget).closest(".clickable")
        clickTarget.addClass "clicked"

        if clickTarget.hasClass "odd"
            clickTarget.addClass("even").removeClass("odd")
        else
            clickTarget.addClass("odd").removeClass("even")

小提琴

于 2013-09-19T19:32:44.877 回答
0

您想用来$(this)定位您单击的元素。此外，.stopPropagation()它不会冒泡事件。

在此处查看演示

$('.clickable').click(function (e) {

    e.stopPropagation();
    var elem = $(this);
    elem.addClass('clicked');

    if (elem.hasClass('odd')) {
        elem.addClass('even');
        elem.removeClass('odd');
    } else {
        elem.removeClass('even');
        elem.addClass('odd');
    }
});
于 2013-09-19T19:33:56.420 回答