Некоторое время назад я использовал некоторые кнопки, которые имеют подавленный эффект, так как они нажимаются с использованием позиции position и top: 1px в псевдоклассе: active.

У меня были проблемы с тем, что события щелчка не срабатывали, и это произошло из-за того, что события mousedown и mouseup не запускались на одном и том же элементе. Я немного поиграл, чтобы убедиться, что самый внутренний элемент покрывает всю кнопку, и обнаружил, что проблема осталась.

Если я щелкну справа вверху текста, то ссылка переместится вниз (запускает событие mousedown), а затем вернется назад (активирует событие mouseup), но щелчок не произойдет. Если я хорошо нажимаю на середину текста или удаляюсь от текста, все в порядке.

Единственное, о чем я могу думать здесь, это то, что событие mousedown запускается для textNode, а mouseup запускается для элемента привязки, так как textNode больше не находится под курсором. Поймать объекты событий и посмотреть на цели, используя firebug, указывает, что это не тот случай, но я действительно не могу придумать другого объяснения. Прочитав немного, я могу найти упоминания о событиях, запускающих textNodes в Safari, но ничего об этом несоответствии.

Следующий фрагмент должен позволить вам повторить проблему. Помните, что вы должны щелкнуть справа вверху текста или на один или два пикселя выше, и эта проблема возникает только с одним рядом пикселей:

<style>
a.button-test {
 display: inline-block;
 padding: 20px;
 background: red;
}
.button-test:active {
 position: relative;
 top: 1px;
}
</style>
<a class="button-test" href="#">Clickedy click</a>

Бессмысленное использование CSS, отсутствие использования встроенного блока, увеличение высоты строки вместо отступов и т. Д. Здесь, похоже, не дает эффекта. Я перепробовал много комбинаций. Большая часть моего тестирования была проведена в Firefox, чтобы позволить мне привязываться к событиям и записывать, что происходит через firebug, но я также сталкиваюсь с этой проблемой в других браузерах.

У кого-нибудь есть вдохновение, которое они могут предложить, кроме как потерять активный прыжок? Я бы очень хотел сохранить этот эффект, если смогу.

Большое спасибо,

Дом (не каламбур)