"JavaScript : недействительным ( 0 ) ; " vs "вернуть ложь" против "protectDefault ()"

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

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

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

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

<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, что добавит границу вокруг него. Добавьте e.stopPropagation() или просто return false, и событие щелчка div не сработает. Вы можете возиться с этим здесь: http://jsfiddle.net/cMKsN/1/

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

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

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

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

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

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

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

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

Мне нравится использовать 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 никогда не будет достигнут, и если используется пример 1 jQuery, пользователь будет перенаправлен в Google, тогда как в примере 2 jQuery он не будет.

Я думаю, что я видел также javascript :; В то время как сеть развивается, трудно отследить хитрости, которые доступны там ... но это главным образом связано с доступностью (кроме javascript: void (0);) и просто небольшая поправка не является javascript: void (0) но javascript: void (0); что означает ничего не делать в значительной степени, как возвращать ложь; хотя не уверен, если javascript: вернуть 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.) вы можете настроить таргетинг на класс как и забыть о предотвращении действия по умолчанию для события click, используя 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();
        });

});

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

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