Как исключить определенный потомок в селекторе jQuery?

Как изменить селектор метода `on` в jQuery, чтобы исключить потомка `.child` и предотвратить выполнение действия при клике на этого потомка?
  • 21 января 2024 г. 8:18
Ответы на вопрос 2
Чтобы исключить определенный потомок в селекторе jQuery и предотвратить выполнение действия при клике на этого потомка, вы можете использовать метод `.on` со вторым аргументом для делегирования события, а затем проверять цель события (`event.target`) в обработчике, чтобы отфильтровать нежелательные элементы с помощью метода `.not` или `:not()` селектора.

Вот пример:

```javascript
$(document).on('click', '.parent *:not(.child)', function(event) {
    if (!$(event.target).is('.child')) {
        // Код для выполнения, когда клик был не на .child
        console.log('Элемент, не являющийся .child, был кликнут');
    }
});
```

В данном примере:

- `'.parent *:not(.child)'` — селектор, выбирающий все потомки элемента с классом `.parent`, исключая тех, у которых класс `.child`.
- `$(document).on('click', ...)` — используется делегирование событий, таким образом событие клика будет обрабатываться на документе с отслеживанием всплывающих событий от элементов, удовлетворяющих селектору.
- `!$(event.target).is('.child')` — проверяется, что элемент, на который было произведено нажатие (`event.target`), не соответствует селектору `.child`.

Также можно использовать метод `.closest`, чтобы проверить, является ли элемент или один из его предков элементом с классом `.child`, и в случае нахождения такого предка не выполнять действие:

```javascript
$(document).on('click', '.parent', function(event) {
    if (!$(event.target).closest('.child').length) {
        // Код для выполнения, когда клик был не на .child и не на потомках .child
        console.log('Клик был не на .child и не на потомке .child');
    }
});
```

Здесь событие клика делегируется для элементов с классом `.parent`, но обработчик сначала проверяет, является ли `event.target` элементом `.child` или делегатом, и игнорирует событие, если это так.
Добавьте 
Похожие вопросы