«Javascript: void (0);» против «возврата ложного» против «protectDefault ()»

Когда я хочу, чтобы какая-то ссылка ничего не делала, а отвечала только на действия 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 или прототипа.

70 голосов | спросил Mike 17 AM00000040000004231 2010, 04:37:42

8 ответов


0

Переплет:

  • javascript: URL - это ужас, которого следует всегда избегать;
  • атрибуты встроенного обработчика событий тоже не очень хороши, но хорошо для быстрой разработки /тестирования;
  • привязка из скрипта, оставляя разметку чистой, обычно считается лучшей практикой. 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, чтобы сделать его доступным с клавиатуры в большинстве браузеров, хотя в действительности оно не стандартизировано. Вы также можете обнаружить нажатия клавиш, как пробел или Enter, чтобы активировать. Это довольно неудовлетворительно, но все еще довольно популярно (например, ТАК так делает).
  • Еще одна возможность - <input type="image">. Это дает преимущества доступности кнопки с полным визуальным контролем, но только для кнопок с чистым изображением.
ответил bobince 17 AM00000040000003931 2010, 04:52:39
0

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

  • В большинстве случаев event.preventDefault() и return false может использоваться взаимозаменяемо.
  • event.preventDefault() предотвратит перезагрузку страницы по желанию, но позволит событию click всплыть до родительского объекта. Если вы хотите остановить всплывающее окно, вы можете использовать его вместе с 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/

ответил karim79 17 AM00000040000000231 2010, 04:46:02
0

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

ответил Adam 17 AM00000040000003031 2010, 04:49:30
0

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

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

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

ответил James Black 17 AM00000040000000431 2010, 04:46:04
0

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

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

ответил Dan Davies Brackett 17 AM00000040000002131 2010, 04:46:21
0

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

Я всегда использую и рекомендую использовать 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();
        });

});
ответил Jean Paul A.K.A el_vete 21 32012vEurope/Moscow11bEurope/MoscowWed, 21 Nov 2012 01:09:52 +0400 2012, 01:09:52
0

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

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

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

ответил Whit 17 AM00000040000000331 2010, 04:41:03
0

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

<a href="#" onclick="return handler();">Link</a>
ответил casablanca 17 AM00000040000000131 2010, 04:49:01

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132