1

Есть такой код

$(document).on('click', function(e){
    if(e.target !== '.profile-full' || e.target !== '.preview--more' ) {
       console.log( 'preview--more click--' + (e.target == '.preview--more'))
       console.log(e.target)
       $('.profile-full').removeClass('profile-full__active')
    }
});
.profile-full {display: none;}
.profile-full__active {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile-full profile-full__active">
   <p>text</p>
</div>

<button class="preview--more">
  click
</button>

Что мне надо: Если клик не на .profile-full или .preview--more, тогда скрываем блок .profile-full, иначе - условие не сработает.

Что я вижу в браузере: первый лог говорит о том, что клик по preview--more выдает false, а второй лог показывает, что клик был по preview--more.

Почему так происходит?

Ну и клик по preview--more скрывает нужный мне блок, хотя не должен, ведь клик как раз таки по preview--more

2
  • Что такое e? Если это объект события, то e.target никогда не будет строкой и естественно сравнение строки и не-строки даст false. Приведите минимальный воспроизводимый пример без всяких там «в консоли это», потому что иначе нам придётся гадать на кофейной гуще
    – andreymal
    14 июн 2018 в 8:18
  • @andreymal добавил в тему 14 июн 2018 в 8:26

2 ответа 2

2

Ошибочное условие: e.target - это html элемент

Однако сравнивается он со строкой и, так как используется ==, в процессе сравнения операнды в данном случае будут приведены к строке.

После приведения строка из e.target не будет равна ни .profile-full, ни .preview--more поэтому условие будет выполняться всегда.

Кроме того, в условии присутствует логическая ошибка:

первый лог говорит о том, что клик по preview--more выдает false, а второй лог показывает, что клик был по preview--more.

Само условие построено так, что результат вполне корректный, так как если бы e.target был бы равен .preview--more, то сработало бы условие e.target !== '.profile-full' и управление переходит внутрь if.

Вместо сравнения со строкой стоит проверять наличие указанного класса, например с помощью метода .classList.contains

if(e.target.classList.contains('profile-full') || e.target.classList.contains('preview--more'))
1
  • @Darth, как-то странно сниппет добавил, надо было тогда внутрь тоже логи хотя б добавить
    – Grundy
    14 июн 2018 в 8:37
0

Решение таково:

    if($(e.target).attr('class') !== 'preview--more' ) {
        if($(e.target).parents('.profile-full').length == 0) {
            $('.profile-full').removeClass('profile-full__active')
        }
    }

Спасибо Darth за наводку

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.