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

Question

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

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

Answer 1

编辑：自从写下答案后，delegate已被on，应该改用它。

---

您可以（ab）使用发生的事件冒泡。您将点击侦听器附加到每个带有类 circle 的 div 上（可以使用 jQuery 的 委托 方法），一旦处理完该事件，取消冒泡，这样它就不会到达主体点击侦听器。

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

像这样的事情：

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，或者只是做你想要的需要当场。

Answer 2

尝试：

    $(document).ready(function () {
        $(this).click(function (e) {
            var element = $(e.target);
            // do your job with element, for example you can retrieve its "id"
            alert(element.attr("id"));
        });
    });

Answer 3

您需要使用事件的 target 属性。

$('body').click(function (e) {
    if(e.target.hasClass("circle")) {
        $(e.target).remove();
    } else {
        // Create circle
    }
});

Answer 4

它不会完全满足您的要求，但会给您一些想法。

我想要这个有很多原因（更容易编码，符合人体工程学效率等）：带有假按钮。

此外，您还可以使用可放置区域来创建和删除项目（ http://docs.jquery.com/UI/可删除）。