Как отменить навигацию, когда пользователь нажимает на ссылку (элемент <a>)?

Question

Я пытаюсь загрузить некоторые вещи, используя AJAX, когда пользователь нажимает на ссылку, но я хочу, чтобы ссылка действительно куда-то шла, чтобы приложение все еще работало, когда JavaScript отключен. Есть ли способ просто сделать что-то с javascript и отменить навигацию при нажатии на ссылку?

Какая лучшая практика? Это можно сделать, или мне нужно заменить ссылку с помощью JavaScript или что?

Answer 1

Если у вас есть HTML, как это:

<a href="no_javascript.html" id="mylink">Do Something</a>

Вы бы сделали что-то подобное с jQuery:

$(document).ready(function() {
    $('#mylink').click(function() {
        doSomethingCool();
        return false; // cancel the event
    });
});

Все, что вам нужно сделать, это отменить событие click с помощью Javascript, чтобы предотвратить выполнение действия по умолчанию. Поэтому, когда кто-то щелкает ссылку с включенным Javascript, вызывается doSomethingCool();, и событие click отменяется (таким образом, return false;) и не позволяет браузеру перейти на указанную страницу. Однако, если у них отключен Javascript, он приведет их к no_javascript.html напрямую.

Answer 2

У меня ничего не получалось с браузером Google Chrome.

Вот что сработало (используя jQuery):

$(document).ready(function() {
    $('#mylink').click(function(event) {
        doSomethingCool();
        event.preventDefault(); // cancel the event
    });
});

Answer 3

почему jQuery?

HTML:

<a href="no_javascript.html" onclick="return doSmth()">Link</a>

... и код JavaScript:

function doSmth(){
  // your code here
  return false
}

Answer 4

Что бы я сделал:

а. для атрибута href javascript:void(); будет установлено

б. для события onclick, предоставит функцию для обработки события click, и эта функция вернет false.

Например:

<script type="text/javascript">
   function myfunction()
   {
      //do something
      return false;
   }
   </script>

   <a href="javascript:void();" onclick="myfunction()">Link</a>

Answer 5

<a href="http://www.google.com" class="ignore-click">Test</a>

с jQuery:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

с JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

Вы назначаете класс .ignore-click столько элементов, сколько вам нравится, и щелчки по этим элементам будут игнорироваться

Answer 6

для IE как минимум, просто поставьте this.event.returnValue = false; в конце метода.

например:

function onClickFunction()
 {
  someMethod();
  this.event.returnValue = false;
 }

У меня был сложный метод, где это помогло.

Answer 7

Лучший способ должен быть таким.

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

Answer 8

Я использую document.location.replace для навигации, но когда я хочу отменить навигацию, return false (в той же функции, что и document.location.replace) не отменяет навигацию.

Answer 9

просто, используйте атрибут rel = "nofollow"

 <a href="signin.php" rel="nofollow">sign in</a>