<rmcreative>

RSS

Предотвратить действие ссылки по умолчанию

8 октября 2010

Иногда приходится использовать ссылки без href или с якорями, поверх которых уже навешивается JavaScript-обработчик. Самыми распространёнными способами являются следующие:

<a href="javascript:void(0)">Я не сработаю</a>

Ужас в чистом виде образца начала 2000-х, если не более ранних, лет. Единственный плюс в том, что работать будет даже в очень древних браузерах.

<a id="my_link" href="#my_anchor">Я не сработаю</a>
<script>
  $(document).ready(function(){
    $("#my_link").click(function(){
      //...
      return false;
    });
  });
</script>

Не только предотвратит событие по умолчанию, но и, также, предотвратит всплытие события. Так что данный способ не подходит, если событие всё-таки должно всплыть.

<a id="my_link" href="#my_anchor">Я не сработаю</a>
<script>
  $(document).ready(function(){
    $("#my_link").click(function(e){
      e.preventDefault();
      //...      
    });
  });
</script>

Предотвратит только событие по умолчанию. Тут, кстати, частенько забывают про IE6, который про preventDefault ничего не знает и хочет вместо него e.returnValue = false. Хотя, в jQuery это всё скрыто.

Для получения аналога return false нужно добавить e.stopPropagation() и, соответственно, e.cancelBubble = true для любимого IE.

т.е. return false = e.stopPropagation + e.preventDefault.

Комментарии RSS

  1. №3195
    Костег
    Костег 08.10.2010, 18:50:59

    Что такое всплытие события? Я всегда

    return false;

    использую

  2. №3197
    Sam
    Sam 08.10.2010, 19:22:00

    Например, если навесить onClick на #parent и кликнуть по одной из ссылок, событие всплывёт до div-а и отработает. При return false не всплывёт.

    <div id="parent">
      <ul>
        <li><a href="#1">1</a></li>
        <li><a href="#2">2</a></li>
      </ul>
    </div>

    Вот тут замечательно описано.

  3. №3198
    Scriptin
    Scriptin 08.10.2010, 20:33:01

    Sam: спасибо за ценное замечание насчет всплытия.

  4. №3199
    xoma
    xoma 08.10.2010, 22:39:34

    Полезная заметка, я только сегодня об этом вспоминал

  5. №3333
    ZhAN
    ZhAN 01.11.2010, 17:24:32

    А вы не считаете что более правильно вместо

    href="#my_anchor"

    Использовать что-то типа

    href="kak_vkljuchit_java_script.html"
  6. №3334
    Sam
    Sam 01.11.2010, 19:04:36

    Если ссылка не загрузит страницу — не считаю.

  7. №6899
    Яков
    Яков 24.10.2012, 13:17:45

    Автор, подскажите, пож-та, чем плох древний вариант href="javascript:function", если функционал сайта прекрасно работает с такими вызовами?

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.