Альтернатива <a href="#">, когда тег привязки только запускает действие jQuery, не перенаправляя пользователя?

Question

На моей странице есть множество тегов привязки, которые вызывают только действия jQuery на этой странице.

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

Я не хочу, чтобы в моем приложении были релевантные URL-адреса для каждого действия. Но мне также не нравится отправлять пользователей в верхнюю часть страницы каждый раз, когда они нажимают на одиниз этих <a href="#"> тегов.

Какое значение лучше поместить в значение href тега привязки, кроме #?

Answer 1

Можете ли вы сослаться на фрагмент на странице, который мог бы работать как логический переход к невыполненному действию JavaScript? Если это так, то имеет смысл сослаться на <a href="#account"> и иметь на странице id="account", который может работать как запасной вариант.

Другим вариантом является прямая ссылка на динамически загружаемый контент; таким образом, вы можете довольно удобно использовать href в вызове Ajax вместо жесткого кодирования того, что запрашивать в JavaScript каким-либо образом; <a href="/path/to/dynamic/content">.

Наконец, вы вообще не можете иметь <a href="#"> статически в HTML, но вместо этого создайте его на лету с помощью jQuery, так как он все равно используется только jQuery. Нет необходимости загрязнять разметку местозаполнителями для JavaScript, если эти заглушки в любом случае используются только и для JavaScript.

Относительно «отправки пользователя вверх страницы»; Вы должны просто return false от вашей функции, которую вы подключили как обработчик click();

$('a').click(function() {
    // Do your stuff.
    // The below line prevents the 'href' on the anchor to be followed.
    return false;
});

Answer 2

Вы действительно должны использовать элемент <button> для действий только для JS. У них есть действие по умолчанию (если оно внутри формы), но вне формы они предназначены исключительно для действий, инициируемых пользователем, с которыми вы связываете свой обработчик событий JS.

Answer 3

Вы пытались опустить параметр href?

<a>Link title</a>

Это должно работать нормально и не провоцировать браузер на загрузку веб-страницы или изменение положения страниц. На самом деле, он ничего не сделает, если у вас нет JavaScript для его поддержки.

Параметр href является необязательным, поэтому зачем его включать, если вы его не используете?

Answer 4

Если у вас есть ссылки, которые не являются ссылками, возможно, они не должны быть ссылками?:-) Вы можете рассмотреть другой элемент пользовательского интерфейса, который не имеет поведения по умолчанию (вне формы), например button (вы можете в значительной степени стилизовать кнопки).Или вы можете использовать span или аналогичный, но если вы обязательно зададите соответствующую информацию о доступности (например, ARIA role="link"), чтобы не испортить программы чтения с экрана (и браузертабуляция).

Но если вы хотите продолжать использовать <a href="#">...</a>, просто присоедините к ним обработчик, который вызывает event.preventDefault(); или возвращает false.

Answer 5

Я использую код ниже, и это прекрасно работает.

<div class="panel-heading">Definition
          <div class="pull-right">
              <i class="fa fa-wrench"></i> 
                 <a id="step3Ad" href="javascript:void(0);">Advanced</a>
          </div>
    </div

Answer 6

Если якорь бесполезен для людей, у которых нет javascript, они вообще не должны его видеть.

Лучшая альтернатива - генерировать эти ссылки, используя jQuery при загрузке страницы - таким образом, единственные, кто их видит, это те, кто их использует.

В этом случае иметь href="#" хорошо, потому что, пока ваш обработчик событий заканчивает с return false;, за href никогда не последует

Answer 7

Я предпочитаю использовать:

<a href="javascript:">foo</a>

если только это не вызов ajax для загрузки частичного шаблона, в этом случае я использую что-то вроде этого:

<a href="/link/to/page" onClick="ajax_request_to_partial(); return false;">foo</a>

Возвращая false в событии onclick, вы убедитесь, что сайт не перезагружен, но его все еще можно использовать для открытия URL-адреса на новой странице.

Answer 8

# в порядке. Но сработавшие колбэки должны тогда return false.

   // assigning a click callback to all anchors
   $('a').click(function(evt){
       //... do stuff
       return false; // avoid jump to '#'
   })

Answer 9

если вы связываете какое-то действие с кликом, вы можете вызывать protectDefault (), чтобы избежать отправки пользователя вверху страницы

$("a.clickable").live('click',function(){$(this).doSome(); $(this).preventDefault()});

Answer 10

return false;

Используйте это, чтобы остановить отправку браузером их в начало страницы?