Почему тег «a href» при клике на него не работает?

Сразу замечу что баг смог воспроизвести только на webkit-браузерах, и это были opera, chrome и яндекс-браузер. В ie11, firefox этого бага нет.

Допустим есть некий тег a, у него есть некий атрибут href, содержащий соотвественно некий url.
И если стилизовать этот тег как display: inline-block или просто block, проставить какие-нибудь паддинги, то у него внутри появляется небольшая область, нажатие на которую не приводит ни к переходу по ссылке указанной в href, ни даже к появлению события click.

Вот такой простой html
<a class="fancy-link" href="http://google.ru/">Некая ссылка</a>

Говоря что не появляется событие click я имею в виду что не срабатывает вот такое простейшее событие:
$(document).on('click', '.fancy-link', function () {
        console.log('clicked');
 });

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

Здесь полный пример: codepen.io/anon/pen/rvGgy
Конкретно в данном примере нерабочая область имеет высоту в 2 пикселя и находится точно под текстом. На том же уровне, но уже не под текстом ссылка работает.
hdAEamQ.png

Никакой информации по этому багу нагуглить не удалось, как-то избавиться от него тоже не удалось, и посему вопрос — можно ли как-то сделать этот самый тег полностью, так сказать, кликабельным?
  • Вопрос задан
  • 13018 просмотров
Решения вопроса 1
Очуметь, и вправду - слепая область в пару пикселей. Немного поигравшись с примером пришел к выводу, что проблема в следующем:
- перед кликом, в слепой области, курсор находится над `а` (но не над текстом! `padding`)
- во время клика кнопка уходит вниз (`:active `) и курсор наезжает на текст
- и клик не отрабатывает, потому что нажатие началось над `а`, закончилось над текстом.

Такой же эффект, если мы при `:active` сдвигаем кнопку через `relative/top` а не через `margin`. codepen. Заметьте, что слепая область при `top:8` увеличилась на 8px.

Лечим через pointer-events codepen

Но мне кажется, что такое поведение заслуживает баг репорта, или кто-то имеет больше информации по этому поводу?
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Да, действительно воспроизводится. Chromium 32.0.1700.102 (246481). GNU/Linux x86_64.
Ответ написан
arutyunov
@arutyunov
Mooza.ru — Делаем сайты
Мне из хрома не удалось воспроизвести этот баг. Под текстом всю область обкликал :)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы