"JavaScript: недействительным (0);" vs "return false" vs "preventDefault()"

Когда я хочу, чтобы какая-то ссылка не делала ничего, но отвечала только на действия javascript, что лучший способ избежать прокрутки ссылки на верхний край страницы?
Я знаю несколько способов сделать это, все они работают нормально:

<a href="javascript:void(0)">Hello</a>

или

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(){
      //...
      return false;
    });
  });
</script>

и даже:

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(event){
      event.preventDefault();          
      //...
    });
  });
</script>

Есть ли у вас какие-либо предпочтения? Зачем? в каких условиях?

PS: конечно, приведенные выше примеры предполагают, что вы используете jquery, но есть эквиваленты для mootools или прототипа.

ОТВЕТЫ

Ответ 1

Переплет:

  • javascript: URL-адреса - это ужас, которого следует избегать в любое время;
  • атрибуты обработчика встроенных событий также не блестящие, но ОК для быстрого развития/тестирования;
  • привязка от script, оставив чистую разметку, обычно считается лучшей практикой. jQuery поощряет это, но нет причин, по которым вы не можете сделать это в любой библиотеке или простой JS.

Всего ответов:

  • В jQuery return false означают как preventDefault, так и stopPropagation, поэтому значение отличается, если вы заботитесь о родительских элементах, получающих уведомление о событии;
  • jQuery скрывает его здесь, но preventDefault/stopPropagation должен быть написан по-разному в IE (returnValue/cancelBubble).

Однако:

  • У вас есть ссылка, которая не является ссылкой. Он нигде не связывается; это действие. <a> на самом деле не идеальная разметка для этого. Это пойдет не так, если кто-то попытается щелкнуть его средним щелчком или добавить в закладки или любой другой доступ к ссылке.
  • В тех случаях, когда он действительно указывает на что-то, например, когда он открывает/закрывает другой элемент на странице, установите ссылку на #thatelementsid и используйте ненавязчивые скрипты, чтобы захватить идентификатор элемента из имени ссылки. Вы также можете обнюхать location.hash при загрузке документа, чтобы открыть этот элемент, поэтому ссылка становится полезной в других контекстах.
  • В противном случае для чего-то, что является чисто действием, лучше всего пометить его как одно: <input type="button"> или <button type="button">. Вы можете создать его с помощью CSS, чтобы выглядеть как ссылка, а не кнопка, если хотите.
  • Однако есть некоторые аспекты стилизации кнопок, от которых вы не можете избавиться в IE и Firefox. Это обычно не важно, но если вам действительно нужен абсолютный визуальный контроль, компромисс заключается в использовании <span>. Вы можете добавить свойство tabindex, чтобы сделать его доступным для клавиатуры в большинстве браузеров, хотя это не совсем стандартизировано. Вы можете также обнаружить нажатия клавиш, например Space или Enter, для активации. Это довольно неудовлетворительно, но все еще довольно популярно (SO, для одного, это так).
  • Другая возможность - <input type="image">. У этого есть преимущества доступности кнопки с полным визуальным контролем, но только для чистых кнопок изображения.

Ответ 2

Единственное преимущество, которое я могу придумать для использования javascript:void(0), заключается в том, что оно будет поддерживаться даже самыми старыми браузерами. Тем не менее, я бы использовал один из других ненавязчивых подходов, о которых вы упомянули:

  • Для большинства целей event.preventDefault() и return false могут использоваться взаимозаменяемо.
  • event.preventDefault() предотвратит перезагрузку страницы по желанию, но позволит событию клика перейти к родительскому элементу. Если вы хотите остановить пузырь, вы можете использовать его в сочетании с event.stopPropagation.
  • return false дополнительно остановит событие от барботажа до родителя.

Я говорю "взаимозаменяемо" в первом пункте выше, потому что большую часть времени нам все равно, происходит или нет событие пузырьков до родителя (ов). Однако, когда нам нужна какая-то тонкая настройка, мы должны рассмотреть точки два и три.

Рассмотрим следующий пример:

<div>Here is some text <a href="www.google.com">Click!</a></div>​

$("a").click(function(e) {
    e.preventDefault();
});

$("div").click(function() {
    $(this).css("border", "1px solid red");
});
​

Нажатие на якорь предотвратит запуск действия по умолчанию для события, поэтому браузер не перенаправляется на www.google.com. Тем не менее, событие по-прежнему будет "пузыриться" и привести к тому, что произойдет событие div-click, которое добавит границу вокруг него. Добавьте e.stopPropagation() или просто return false, и событие с щелчком div не будет срабатывать. Вы можете использовать это здесь: http://jsfiddle.net/cMKsN/1/

Ответ 3

Мне нравится использовать href="javascript:void(0)" в ссылке, поскольку # подразумевает прыжок в верхнюю часть страницы, и это может произойти, если по какой-либо причине ваше событие jQuery не загружается, например. jQuery не загружается.

Я также использую event.preventDefault();, так как он не будет следовать за ссылкой, даже если перед возвратом false встречается ошибка; например:

HTML:

<a id="link" href="http://www.google.com">Test</a>

jQuery Пример 1:

$("#link").click(
    function(){
        alert("Hi");
        invalidCode();
        return false;
    }
);

Пример jQuery 2:

$("#link").click(
    function(event){
        event.preventDefault();
        alert("Hi");
        invalidCode();
        return false;
    }
);

Так как invalidCode(); выдаст ошибку return false никогда не будет достигнута, и если будет использован пример jQuery 1, пользователь будет перенаправлен на Google, тогда как в примере jQuery 2 он не будет.

Ответ 4

Я предпочитаю использовать return false, поскольку это дает возможность дать пользователю выбор, продолжать ли это действие, например, здесь, в quirksmode:

http://www.quirksmode.org/js/events_early.html#default

Это простой, старый, но он хорошо работает, кросс-браузер, независимо от версии javascript.

Ответ 5

event.preventDefault() и return false; - это одно: они инструктируют браузер не обрабатывать действие по умолчанию для события (в этом случае, переходя к href тега привязки, который был нажат). href=javascript: и его ilk - это что-то другое - они вызывают действие по умолчанию как "ничего не делать".

Это вопрос стиля. Вы хотите выполнить всю свою работу в onclick или хотите, чтобы вы могли размещать действия как в onclick, так и в href и полагаться на возможности браузера модулировать между двумя?

Ответ 6

Я думаю, что я видел также javascript:; вокруг, как развивается сеть, трудно отслеживать трюки, которые доступны там.. но это в основном о доступности (помимо javascript: void (0);), и только небольшая коррекция не является javascript: void (0) но javascript: void (0); что означает ничего не делать так, как возвращение false; хотя не уверен, что javascript: return false; делает то же самое.

Я всегда использую и предлагаю использовать javascript: void (0); по нескольким причинам.. по моему скромному мнению, конечно.

1.) Я использую его из-за того, что было упомянуто выше. href= "#" не подходит, поскольку это может указывать на то, что вы вернетесь, и даже в этом случае '#top' будет более адекватным для этого случая, Но также это может вызвать что-то еще в вашем коде, которое использует # (хэши), поэтому другая причина - избежать конфликтов с другим javascript, который может использовать #. И я склонен искать это при использовании плагина, например, и немедленно заменяю его. href= '#' to href= 'javascript: void (0);' или href= 'javascript:;'

2.) Если я хочу повторно использовать функцию для группы определенных тегов Anchor, я могу вызвать ее с помощью селектора по любому атрибуту, не беспокоясь о обнаружении события click и предотвращении действия по умолчанию, и я делаю это без даже думая об этом как предпочтении развития.

3.) В большинстве случаев, если вы занимаетесь построением ссылок с использованием javascript: void (0); пытается сделать ссылку не следующей, как старый href= rel= nofollow, чтобы избежать индексации ссылок, которые являются действиями. Я не настолько уверен в этом только потому, что слышал, что сканеры и роботы теперь могут читать даже Flash, поэтому не удивляйтесь, если они смогут читать ссылки javascript

4.) Ссылаясь на 2.) вы можете настроить таргетинг на класс и забыть о предотвращении действия по умолчанию для события клика с помощью href= "javascript: void (0);" а затем целевой класс непосредственно из селектора в функции jQuery.

        jQuery(function($)
        {
            //from the rel
            $('a[rel="-your-rel-id"]') ... off('click').on('click',function()

            //from the class
            $('a.-the-class') ... off('click').on('click',function()

            //from the id

            $('a#-the-id').off('click').on('click',function()
            {
            --do something with this link
        });

});

Я лучше чувствую себя более комфортно, используя класс, как вы всегда можете...

$(а # -Ваш-идентификатор).hasClass(-yourclass -)

или любую другую интересную комбинацию и затронуть многие ссылки. Поэтому я действительно не предлагаю использовать A как селектор исключительно.

Обычно я предлагаю следующее:

  jQuery(function($)
        {
            //from the rel
            $('a[rel="-your-rel-id"]').on('click',function(event)
            //do something
            //prevent the click as is passed to the function as an event
            event.preventDefault();
        });

});

Ответ 7

Dreamweaver по умолчанию использует хороший трюк, который я начал использовать.

<a href='javascript:;'></a>

Он маленький, он не отключается, а привязки и агностик библиотеки.

Ответ 8

Я бы предпочел не помещать JavaScript в href, потому что это не то, для чего оно предназначалось. Я предпочитаю что-то вроде

<a href="#" onclick="return handler();">Link</a>