Блог

Главная - Вопросы по программированию - Щелчок по заголовку jQuery, НО не привязка внутри

Щелчок по заголовку jQuery, НО не привязка внутри

#jquery

#jquery

Вопрос:

У меня есть некоторая разметка, например:

<th>Header <a class="uiFilter">Filter</a></th>

и некоторый код, подобный:

$('.uiGridHeader th').click(theadClick); однако я хочу сказать, что если нажата привязка, то НЕ выполняйте эту функцию! Триггер также должен выполняться на TH, поэтому я не могу добавить дополнительный диапазон для добавления триггера.

Я просмотрел api jquery not, но не совсем уверен, как его использовать при передаче вызова функции внутри метода click.

У меня также есть некоторые действия по ссылке привязки, поэтому любое предотвращение должно позволять привязке продолжать выполнять код!

Ответ №1:

Либо предотвратите всплывание события click при щелчке по a элементу:

 $('.uiGridHeader th a.uiFilter').click(function(event) {
    event.stopPropagation();
});

или проверьте, какой элемент был нажат:

 $('.uiGridHeader th').click(function(event) {
    if(event.target === this) {
        theadClick.call(this, event)
    }
});

Обновление: если вы привязываете какие-либо обработчики событий с .live помощью или .delegate , тогда вам придется использовать второй подход, поскольку эти методы привязывают обработчик событий не к самому элементу, а к некоторому предку элемента (или корню документа).

Обновление 2: если у вас более сложная вложенная структура, например

 <th><span>Header</span> <a class="uiFilter"><span>Filter</span></a></th>

вы должны использовать еще несколько хитростей jQuery для тестирования. Например, в приведенном выше случае вы могли бы сделать:

 $(event.target).closest('a.uiFilter', this).length === 0

Это проверяет, является ли щелкнутый элемент a.uiFilter самим собой или внутри него. Выражение вычисляется true , если нет. Второй переданный параметр closest ограничивает поиск элементами, внутри this которых находится элемент заголовка таблицы.

Комментарии:

1. Этого return false; будет недостаточно? Похоже, что в быстром тестировании все работает нормально .

2. Это также предотвратило бы действие по умолчанию. Поскольку я не знаю, что OP хочет сделать со ссылкой, использование stopPropagation казалось самым безопасным 😉 Если действие по умолчанию также должно быть предотвращено, $('.uiGridHeader th a.uiFilter').click(false) это хороший ярлык.

3. stopPropagation также останавливает любой jQuery по ссылке привязки

4. @Cameron: Нет, это не так, это только предотвращает переполнение дерева DOM событием. Он по-прежнему выполняет обработчики событий, привязанные к элементу. Пожалуйста, создайте jsfiddle.net демонстрация.

5. Однако ваш второй код больше не запускает функцию theadClick!

Ответ №2:

Вы можете привязать обработчик click события к a и остановить распространение события:

 $(".uiFilter").click(function(e) {
    e.stopPropagation();
});

Это остановит передачу события в th элемент, что, в свою очередь, означает, что любые обработчики click событий, связанные с этим (или любыми другими элементами-предками), не будут выполняться.

Комментарии:

1. stopPropagation также останавливает любой jQuery по ссылке привязки

Метки: ,