• Техногрет
  • Правильные ссылки. Продолжение

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Максим Никитин

    1 ноября 2010


    Задача.

    Разрешить кликать по ссылкам с зажатыми 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.

    Исправленная ссылка
    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    <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>