Можно ли включить box-shadow в область div, которая реагирует на событие щелчка?

у меня естьdiv действуя как круглая кнопка. Он разработан таким образом, что значительная часть его общего внешнего вида происходит отbox-shadow:

<body style="background:black">
<div id="button" style="width: 50px; height: 50px; background: yellow; border: none; border-radius: 50px; box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff"></div>
</body>

У меня есть кнопка прослушивания событий, прикрепленная к кнопкеdiv, К сожалению, он не отвечает, еслиdiv нажимается наbox-shadow какbox-shadow отображается за пределамиdiv.

Это особенно проблема на сенсорных устройствах, где палец иногда не касается центраdiv, (Конечно, он реагирует нормально, если щелчок находится в пределах области div в 50 пикселей.)

Можно ли заставить слушателя события реагировать на нажатия наbox-shadow а также фактическоеdiv?

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

(Кнопкаdiv должен быть оформлен сbox-shadow, Я не могу использоватьborder собственность или увеличениеpadding.)

Ответы на вопрос(1)

Ваш ответ на вопрос