JQuery, если нажмите на элемент, сделайте это, иначе сделайте

Question

Это смущает меня сейчас. Вот псевдокод того, что я пытаюсь достичь, мне нужно использовать щелчок, поскольку он перехватывает жесты касания, которые я создаю.

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

Answer 1

Редактировать : С момента написания ответа ниже, delegate был заменен на on, который следует использовать вместо.

---

Выможете (ab) использовать событие пузыря , которое происходит.Вы прикрепляете прослушиватель кликов к каждому div с классом circle, который когда-либо будет создан (который может использовать метод 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;
});

ИлиВ более простом подходе просто проверьте цель события click, используя 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 в качестве переменной, он может быть только один.Если вы этого не хотите, вы можете использовать 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/Droppable).