jquery .on () нажмите и: нет

0
$(document).on('click', 'body:not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

Используя вышеизложенное, везде, где я нажимаю на pagem, console.log показывает clik даже когда я нажимаю элемент .add-to он срабатывает, когда это не должно.

Я что-то испортил?

<ul class="user-controls">
    <li>
        <a class="add-to" href="#">
            <img src="/assets/img/icons/add-feed.png" class="favicon">
            <span>Add</span>
        </a>
        <div></div>
    </li>
</ul>
Теги:

5 ответов

3
Лучший ответ

body:not(.add-to) селектора body:not(.add-to) соответствует элементу <body> страницы, если он не раскрывает класс add-to. Он не будет соответствовать ни одному из его потомков.

Вы можете искать:

$(document).on('click', 'body :not(.add-to)', function(e) {
    console.log('click');
});

Но в этом случае предка body не требуется, и вам нужно только написать:

$(document).on('click', ':not(.add-to)', function(e) {
    console.log('click');
});

EDIT: из разметки, которую вы опубликовали, становится ясно, что щелчок на элементах <img> или <span> вызовет обработчик, поскольку ни один из этих элементов не выставляет сам класс add-to.

Вы можете обойти эту проблему, применив ближайший() к e.target:

$(document).on("click", function(e) {
    if (!$(e.target).closest(".add-to").length) {
        console.log("click");
    }
});

Обратите внимание, что передача :not(.add-to *) на on() будет иметь почти такой же результат, но не совсем: этот селектор не будет препятствовать выполнению вызова console.log(), если элемент <a> имеет текстового содержимого и нажмите на него.

Решение, основанное на closest(), с другой стороны, предотвращает выполнение console.log() в этих обстоятельствах.

  • 0
    это все еще запускает console.log
  • 0
    @Beardy, это не должно происходить, если событие не вызвано потомком элемента, соответствующего .add-to , но не соответствующего .add-to себя. Можете ли вы опубликовать образец вашей разметки и / или воспроизвести проблему простым скрипом ?
Показать ещё 2 комментария
0

Нет необходимости в теле

$(document).on('click', ':not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

На данный момент вы говорите этому телу, у которого нет класса .add-to

0

Поскольку ваш селектор соответствует всем элементам body которые не имеют add-to класса.

То, что вы пытаетесь сделать, выглядит примерно так:

$(document).on('click', 'body > *:not(.add-to)', function(e){
    console.log('click');
});
0

Добавьте пространство между телом, чтобы получить декандаменты

$(document).on('click', 'body :not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});
0

Вам нужно пространство между body и :not(.add-to) иначе вы говорите ему, чтобы исключить элементы тела с add-to класса:

$(document).on('click', 'body :not(.add-to)', function(e){
    //$('.tooltip').hide();
    console.log('clik');
});

Пример - http://jsfiddle.net/UF44p/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню