2011-01-18 7 views
1

Я пытаюсь захватить событие клика, которое пузырится на DOM в теле, проверьте, что такое элемент выбора элемента click, а затем на основе этого выберите вызов функции.Событие Bubbling и jQuery

Что-то вроде этого:

<body> 
    <a id="do-default-code">Default code</a> 
    <a id="do-override-code">Override code</a> 
</body> 

И я изображая (псевдо-код), как это. Я использую JQuery:

$('body').bind('click', function() { 
    if ($(this) === $('#do-override-code')) { 
     overrideCode(); 
    } else { 

    } 
}); 

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

+0

для начала вы используете несоответствующие кавычки ... – jcolebrand

+0

@drachenstern Спасибо за ваш острый глаз. Есть ли у вас какие-либо предложения о том, как захватить это событие и проверить, какой из селекторов был нажат на элемент? – jerome

+0

Ваше сравнение двух объектов jQuery с '===' будет ** НИКОГДА ** быть равным: [http://fixingthesejquery.com/#slide27](http://fixingthesejquery.com/#slide27) - Кроме того, вы можете взглянуть на ['.is()'] (http://api.jquery.com/is) – gnarf

ответ

2

В вашем заявлении ваш this ссылается на элемент, которому вы привязали событие. В этом случае элемент тела. Таким образом, утверждение if никогда не является истинным.

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

$('body').bind('click', function(event) { 
    if ($(event.target).attr('id') == 'do-override-code')) { 
     overrideCode(); 
    } else { 

    } 
}); 
+2

Но почему бы не просто ['$ ('body'). Delegate ('# do-override- code ',' click ', fn); '] (http://api.jquery.com/delegate), так как это в основном то же самое. – gnarf

+0

А также 'event.target.id == 'do-override-code'' должно быть достаточным и быстрее, чем вызов' .attr() ' – gnarf

+0

Если мне нужно вызвать' overrideCode() ', но не вызывать никаких других события, связанные с '' # do-override-code'', что вы бы порекомендовали? В настоящее время я делаю что-то немного неуклюжие: 'element.unbind ('click'); element.bind ('click', overrideCode); ' – jerome

0

Вам необходимо передать событие в вашу функцию и проверить это событие.

Эта ссылка дает всю информацию, которую вы могли бы хотеть знать http://www.quirksmode.org/js/events_properties.html такие как

Какой элемент HTML является объектом события?

, из которого можно легко извлечь все, что семантическую информацией вы хотели

Смежные вопросы