«javascript: void (0);» vs «return false» vs «preventDefault ()»

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

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

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

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

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

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

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

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

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

Мне нравится использовать 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 он этого не сделает.

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

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