# или javascript: void (0)? - PullRequest
       1

# или javascript: void (0)?

8 голосов
/ 30 января 2011

Я не собираюсь начинать дебаты.

Если мы хотим использовать событие onClick, нам следует, определенным образом, отключить href для запуска.- Это правильно?

Если вышеприведенное верно, я считаю, что javascript:void(0) имеет то преимущество, что НЕ вызывает поведение прокрутки.

Являются ли эти предположения правильными?

Примечание: Я не собираюсь искать химеру, но мой квест - найти способ стилизовать кнопки в кресте.путь браузера без доступа к доступности (вообще), без хаков и извращений.

Ответы [ 4 ]

16 голосов
/ 30 января 2011

Если вы хотите запретить переход по ссылке, вы должны добавить event.preventDefault() в свой обработчик кликов (event.returnValue = false; в IE).

Похоже, что вы просто просматриваете ссылки, а не ее функциональность (или цель). Если это так, вы можете использовать button с CSS для стилизации его соответственно.

Следует избегать наличия реальных ссылок с содержимым href # или javascript:void(0).

Дополнительные пояснения:

Использование ссылки просто для того, чтобы иметь что-то «кликабельное», нехорошо. Ссылка имеет четкое синтаксическое значение. Поскольку вы можете назначить обработчик событий click каждому элементу, вы можете использовать любой другой элемент для этого.

Синтаксически наиболее правильным (imo) будет button, так как у вас все еще будет возможность использовать tab для навигации по ним. Вы можете стилизовать их с помощью CSS, чтобы они выглядели как ссылки ( см. Этот пример) .

Теперь относительно предотвращения действия по умолчанию:

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

link.addEventListener('click', function(event){
    // some code
    event.preventDefault();
}, false);

использование event.preventDefault() предотвращает действие по умолчанию, которое в случае ссылки следует за URL.

(приведенный выше код является примером для W3C-совместимых браузеров, IE немного отличается)

0 голосов
/ 30 января 2011

Если вы хотите разделить разметку и сценарии, вы можете также рассмотреть возможность использования делегирования событий для настройки обработчиков событий.

Многие Javascript-фреймворки (например, jQuery ) поставляются с кросс-браузерными абстракциями, чтобы уменьшить это; из-за NIH-синдрома я бросил мое собственное решение , хотя.

Полный пример может выглядеть так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Test</title>
  <script type="text/javascript"
   src="http://mercurial.intuxication.org/hg/js-hacks/raw-file/tip/capture.js">
  </script>
  <script type="text/javascript">
// un-hide elements
document.documentElement.className = 'js';

// use event-delegation to capture click-events
capture('click', '.clicky', function(event) {
    alert(this.title);
    return false;
});
  </script>
  <style type="text/css">
/* display element only if scripting is enabled */
.clicky { display: none; }
.js .clicky { display: inline; }
  </style>
 </head>
 <body>
  <!-- link shouldn't be user-accessible; nevertheless, direct user to
   error page -->
  <div>
   <a href="no-js.html" class="clicky" title="clickety-click">click me</a>
  </div>
 </body>
</html>
0 голосов
/ 30 января 2011

Я предпочитаю javascript: void (0), а не #, потому что он не изменяет адресную строку, помещая туда # (что может повлиять на любые будущие сценарии, которые используют / изменяют URL).

Но лучше, чем оба из них, я предпочитаю, чтобы функция onclick возвращала false (чтобы он вообще не перемещался), а затем добавляла URL, который привел бы к тому же действию, что и нажатие. Например, допустим, нажатие на ссылку загружает некоторый контент в div 'mainArea'. Затем URL перезагрузил бы всю страницу, с этой основной областью, заполненной тем же самым. Преимущество этого состоит в том, что, если они щелкают правой кнопкой мыши по URL-адресу и копируют адрес или открывают в новой вкладке, это все равно работает.

<a href="/FullUrl" onclick="return doClick(this);" >Stuff</a>
0 голосов
/ 30 января 2011

Если у вас есть , чтобы иметь href, используйте javascript:void(0), потому что это не имеет никакого эффекта, в отличие от #.Но вы можете просто не иметь href, дать a a class, чтобы он выглядел как ссылка, например:

/* in stylesheet */
a.scriptlink {
    color: blue;
    text-decoration: underline;
    cursor: pointer
}

<!-- in HTML -->
<a class="scriptlink" onclick="whatever">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...