Как использовать глобальный селектор для ответа на все события щелчка, кроме одного элемента? - PullRequest
Новая
       16

Как использовать глобальный селектор для ответа на все события щелчка, кроме одного элемента?

2 голосов
/ 18 июля 2009

Если у меня есть кнопка: 

<button id="button1">

Обычно я бы написал: 

$("#button1").click(function ()
{    
    //do something
}

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

Существует ли селектор, который позволил бы мне настроить таргетинг на все другие интерактивные элементы в документе, кроме button1?

Ответы [ 3 ]

7 голосов
/ 18 июля 2009

Вы можете использовать : не селектор : 

$('button:not(#button1)').click(function(){
  //Do something
});

Вышеуказанный селектор будет соответствовать всем элементам кнопки, кроме одного с id = "button1".

Если вы действительно хотите выделить все элементы под тегом body, вы можете использовать селектор «Все» (*), а также исключить элементы с помощью : not (селектор) ) или .not (expr) : 

$('body *:not(#button1)').click(function(){
  //Do something
});

или 

$('body *').not('#button1').click(function(){
  //Do something
});

Если вы это сделаете, у вас могут возникнуть проблемы с пузырями или распространением событий, вы можете справиться с этим с помощью функции event.stopPropagation .

6 голосов
/ 18 июля 2009

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

Я знаю .live () существует, но слишком много живых обработчиков также влияют на производительность. Я предпочитаю делегирование событий старого стиля.

Демо здесь 

$(function(){
    $('body').click( clickFn );
  });

  function clickFn( ev ) {

    if (ev.target.id != 'button1' ){
       //do your stuff
       console.log('not a #button1 click');
    }

  }
1 голос
/ 18 июля 2009

Текущая Рекомендация кандидата для выбора из CSS 3 определяет класс :root псевдо .

Псевдокласс :root представляет элемент, который является корнем документа. В HTML 4 это всегда элемент HTML.

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

...