1

Приветствую

У меня ситуация - есть html код

<div class = 'block'>
    <img src = '...'>
</div>

и к нему листы стилей:

.block:after {
// полупрозрачный блок, который лежит полностью над img
}

Я хочу определить, что пользователь нажимает мышкой по картинке

$('.block img').on('click', function(e){});

не срабатывает, потому что мешает этот полупрозрачный :after

Можно ли это как-то обойти?

Те варианты, которые мне пришли в голову, не очень нравятся: 1) вместо article:after использовать некоторую оболочку/обертку

<div class = 'shell'><img></div>

и обращаться к ней

$('.shell').on('click', function(e){});

недостаток - не хочется плодить лишние теги

2) отслеживать нажатия на .article и обрабатывать координаты нажатия, проверять, соответствуют ли они координатам img

недостаток - много лишнего js кода, возможно изменение кода, если буду менять устройство .article

Есть ли еще какие-то способы? Или все таки склониться к 1-ому, как самому простому и очевидному?

P.S.

я внутрь картинке добавляю тень, img не позволяет это делать напрямую через свойство box-shadow, поэтому приходится над картинкой создавать невидимый блок и к нему применять тень (сейчас это :after, поскольку не требует дополнительных тегов)

3
  • ну ваш псевдокласс after полностью прикрывает картинку? и еще его размеры больше или ровны размерам картинки? 21 дек 2017 в 12:54
  • $('.block').on('click', function(e){$(this).children('img')}); так не подойдет. Я в JS не силен но, так будет выбран img который вам нужен. Но могу ошибатся
    – klifort
    21 дек 2017 в 13:29
  • нет - так я получу доступ к картинке, но нажать я могу не на картинку (скажем она занимает лишь часть '.block', а где-нибудь сбоку
    – Zhihar
    21 дек 2017 в 13:40

2 ответа 2

3

Добавьте к after свойство pointer-events: none;

 .block:after {
  pointer-events: none;
 }
1
  • просто гениально!
    – Zhihar
    21 дек 2017 в 14:36
2

Добавьте к .block:after правило pointer-events: none;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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