jquery 如果单击元素，则执行此操作，否则执行此操作

Question

这让我现在很困惑。这是我想要实现的伪代码，我需要使用单击，因为它与我构建的触摸手势 Hook 。

if body is clicked {
    if click has touched .circle {
        remove circle;
    }
    else {
        create circle;
    }
}

Answer 1

编辑:自从写下答案后，delegate 已被 on 取代。 ，应该使用它来代替。

<小时/>

您可以(ab)使用 event bubbling发生这种情况。您将点击监听器附加到每个带有将要创建的circle类的div(可以使用jQuery的delegate方法)，并且一旦处理完该事件，取消冒泡，所以它不会到达 body 点击监听器。

并且，在主体监听器上，只需附加圆圈即可。

类似这样的事情:

var circle = $("<div>").addClass("circle").text("Circle!");

$("body").click(function() {
    $(this).append(circle);
});

$("body").delegate(".circle", "click", function(e) {
    $(this).remove();

    //To stop the bubbling up
    e.stopPropagation();
    return false;
});

或者，更简单的方法，只需使用 event.target 检查点击事件的目标:

var circle = $("<div>").addClass("circle").text("Circle!");

$("body").click(function(e) {
    var target = $(e.target);

    if (target.hasClass("circle")) {
        target.remove();
    }
    else {
        $(this).append(circle);
    }
});

注意:因为我将circle div 创建为变量，所以只能有一个。如果您不想这样做，可以使用 jQuery.fn.clone ，或者当场制作您需要的东西。