Double Click | CSS

Как запретить переход по ссылке
По этому же принципу сделано: "Картинка при нажатии принимает полный размер". Почти идеально.

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

Если щёлкнуть один раз по ссылке, а потом отвести мышку, то нужно будет снова нажимать на ссылку дважды. Поддержка браузерами pointer-events довольно хороша.

Двойной щелчок по мне


<a href="http://shpargalkablog.ru/" class="DoubleClick1">Двойной щелчок по мне</a>

Если щёлкнуть один раз по ссылке, а потом отвести курсор мышки, то в следующий раз будет достаточно одного клика. Не работает в Хроме.

Двойной клик по мне


<a href="http://shpargalkablog.ru/" class="DoubleClick">Двойной клик по мне</a>

наверх ↑

4 комментария:

NMitra: Полный код для первого варианта:

<style>
.DoubleClick { /* если есть фон у прапрародителя */
position: relative;
z-index: 1;
}
.DoubleClick span { /* родитель не должен иметь display: inline; и z-index: 1; */
display: inline-block;
}
.DoubleClick:not(:active) a:not(:hover) {
position: relative;
z-index: -1;
}
</style>

<div class="DoubleClick">
<span>
<a href="http://shpargalkablog.ru/">Double click me</a>
</span>
</div>
NMitra: Для второго тоже самое - добавляется два предка.
wakh: Второй пример не работает (Хром х64)
NMitra: Действительно, кстати, в данном случае я считаю его поведение более логичным, чем Mozilla Firefox, хотя такое большая редкость