Правильные ссылки. Продолжение

HTML и CSS XSLT JavaScript Изображения Софт Etc

	Задача.	Разрешить кликать по ссылкам с зажатыми Ctrl, Alt, Shift и Command без вреда для JavaScript.

В далеком 2006 году Степан Резников написал статью о том, как делать правильные ссылки. Давайте вспомним, о чем нам рассказывал Степан. Представим, что на странице отображены маленькие картинки и по клику они увеличиваются, то есть срабатывает JavaScript-код. Для людей без поддержки JavaScript в атрибут href нужно вписать путь до увеличенной картинки, чтобы и они могли ее увидеть.

Я прошелся по любимым сайтам в целях покликать по псевдоссылкам для логина или галереям. Во всех случаях разработчики в JavaScript запрещают переход по ссылке с помощью Event.preventDefault() или return false, который в jQuery работает как Event.stopPropagation() и Event.preventDefault() одновременно. Эти строчки не дают пользователям с включенной поддержкой JavaScript кликнуть по ссылке в сочетании с системной кнопкой Ctrl, Alt, Shift или Command, чтобы открыть страницу в новой вкладке или скачать одним кликом большое изображение.

Разрешить пользователям клики с системными кнопками можно без вреда для скриптов. Для этого нужно не вызывать Event.preventDefault() когда зажат Ctrl, Alt, Shift или Command. В примере описана функция для jQuery, которая выполняет Event.preventDefault() только когда не зажата системная кнопка. То есть, чтобы получить необходимый результат, нужно в функцию первой строчкой написать if($.preventDefaultEvent(e)) return; и не забыть передать в функцию событие e.

Исправленная ссылка

<a class="s" id="smart_link" href="http://www.artlebedev.ru/">Исправленная ссылка</a>
<script>
jQuery.preventDefaultEvent = function(e, options) {
    options = options || {shift:1, ctrl:1, alt:1, meta:1};
    var href = e.currentTarget.getAttribute('href');
    if(((options.shift && e.shiftKey)
        || (options.alt && e.altKey)
        || (options.ctrl && e.ctrlKey)
        || (options.meta && e.metaKey))
        && href && href.indexOf('#') != 0
        && href.indexOf('javascript:') != 0
    ) return true;
    e.preventDefault();
    return false;
}

$(function() {
    $('#smart_link').click(function(e) {
        if($.preventDefaultEvent(e)) return;
        alert('Выполнилась функция');
    });
});
</script>

Правильные ссылки. Продолжение

1 ноября 2010