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

Question

[Антон Вебсайтовский]

Всем привет.
Выезжающий блок с правой стороны при клике на кнопку, в самом верху черный квадрат это закрыть блок, я добавил туда svg иконку крестика, вот только в рабочем примере не видно, не знаю как там иконки добавлять.
Так вот, если кликнуть по самой иконки то закрытие не происходит, а если по черному квадрату в котором иконка svg, то закрытие происходит блока.

Почему так? ведь ссылка и на квадрат и на svg

<a href="#0" class="cd-panel-close" title="Закрыть"><i class="icon-close"></i></a>

А значит при клике на всю кнопку в которой и svg, должно происходить сворачивание.

Рабочий пример: https://jsfiddle.net/cfzLqmse/1/

Answer 1

[mdss]

Есть такое замечательное свойство как pointer-events. Пропишите его для иконки

.cd-panel-close > i {
  pointer-events: none;
}

https://developer.mozilla.org/ru/docs/Web/CSS/poin...

Comments

[Антон Вебсайтовский]

о братишка ну это ты подсабил )
спасибо, бачит, первый раз слышу об таком свойстве.

А почему у меня не работало? простой же код, в ссылке иконка. Всеж должно работать.

[Сергей delphinpro]

Антон Вебсайтовский, Потому что вы конкретно проверяете таргет на класс. А клик-то происходит по иконке.
Нужно проверить всю цепочку "вверх" на наличие класса closets()

if ($(event.target).is('.cd-panel') || $(event.target).closest('.cd-panel-close')) {