Question

我正试图了解如何在单击特定元素时停止向上，向下，向下冒泡的单击事件。

<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等会影响点击事件本身而非目标本身。我可能希望其他（不相关的）点击事件发挥作用。

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

Answer 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")

FIDDLE

Answer 2

您希望使用$(this)来定位您点击的元素。此外，.stopPropagation()因此不会使事件冒出来。

<强> See Demo here

$('.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');
    }
});

jquery事件冒泡和event.targets

2 个答案: