Отмена всплывающих событий на определенных элементах - JavaScript

Question

По сути, я хочу сделать щелчок в любом месте страницы, кроме как в поле ввода, и на одном элементе уровня блока (по расширению всех дочерних элементов) удалить указанное поле ввода. Поэтому я поместил событие onclick на весь документ. Для соблюдения вышеуказанных условий я поставил условия перед четкими инструкциями делать это только в том случае, если событие не возникло из определенных элементов.

clearSearch = function (e){
 e ? e : e = window.event;
 e.target ? target = e.target : target = e.srcElement;
 if (target.nodeName != "INPUT" && document.getElementById('ul'))
 document.getElementById('input').value = "";
}

С помощью этого метода, если я хочу продолжать нажимать на ul, чтобы вызвать действие, я должен явно указать это в этом операторе if. Затем я должен сделать то же самое для элементов li под ul. Тогда любые другие дети, которых я создаю.

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

Answer 1

Вы можете удалить сложную логику из clearSearch и просто очистить окно поиска. Затем добавьте несколько новых обработчиков onClick к элементам, которые вы не хотите вызывать этим методом. В этих обработчиках установите event.cancelBubble в значение true, чтобы предотвратить вызов функции clearSearch.

С Причудливый режим :

For a complete cross-browser experience do:

function doSomething(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}