jQuery: нажмите на * только * этот элемент

Question

В высокохудожественном рисунке выше зеленый квадрат - ребенок от розового. Моя функция обернула розовый вокруг зеленого, поэтому зеленый квадрат может быть чем угодно - гиперссылкой, изображением, кнопкой и т. Д.

Я хочу захватить клик на розовом элементе ТОЛЬКО, если он тоже не клик на зеленом элементе.

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

Есть какие-нибудь подсказки?

ВАЖНОЕ РЕДАКТИРОВАНИЕ: я вообще не могу связываться с зеленым квадратом, поэтому не нужно ничего добавлять к событию щелчка.

Answer 1

Вы можете сделать это:

$('.pink-box-selector').click(function(e) {
    if ($(e.target).is('.pink-box-selector')) {
        // do stuff here
    }
});

Answer 2

Два варианта. Сначала вы можете проверить, является ли цель зеленым делением.

$('#pinkdiv').click(function(e) {
  if ($(e.target).is('#greendiv')) return;
  // handle the event
});

Или вы можете написать обработчик щелчка для розового элемента div и остановить распространение щелчков на элементе зеленого цвета.

$('#greendiv').click(function(e) {
  e.stopPropagation();
});

Answer 3

Поможет ли $("#div_id :not('#excluded_element')).click();? http://api.jquery.com/not-selector/

Answer 4

http://jsfiddle.net/rlemon/d8qVp/

$("#pink").click(function(){
    if(!$("#green").is(":hover")) {
        alert('here');   
    }
});

Answer 5

Установить отдельный приемник событий щелчка для "зеленого" элемента и иметь его event.preventDefault()