Как использовать ссылку для вызова JavaScript?

166

Как использовать ссылку для вызова кода JavaScript?

javascript Джин Юн
источник

Ответы:

192 
<a onclick="jsfunction()" href="#">

или 

<a onclick="jsfunction()" href="javascript:void(0);">

Редактировать:

Приведенный выше ответ на самом деле не является хорошим решением, так как я многое узнал о JS с тех пор, как я впервые написал. Посмотрите ответ EndangeredMassa ниже для лучшего подхода к решению этой проблемы.

челси
источник
11
Я бы порекомендовал второй, так как первый прокручивает вас вверх страницы.
Мэтт Гранде
7
Да, это определенно произойдет, если только вы не добавите «return false»; после вашей функции.
Челси
26
Это код 1998 года. Используйте одно из ненавязчивых решений. Пожалуйста.
Эндрю Хеджес
7
Не используйте ни один! Ссылки предназначены для ссылок, они не являются фиктивными элементами для вызова javascript.
I.devries
4
если вы собираетесь встроить JavaScript, сделайте это следующим образом: <a onclick="jsfunction;return false" href="linkasnormal">
Fire Crow,
201

Ненавязчивый JavaScript, нет зависимости от библиотеки:

<html>
<head>
    <script type="text/javascript">

        // Wait for the page to load first
        window.onload = function() {

          //Get a reference to the link on the page
          // with an id of "mylink"
          var a = document.getElementById("mylink");

          //Set code to run when the link is clicked
          // by assigning a function to "onclick"
          a.onclick = function() {

            // Your code here...

            //If you don't want the link to actually 
            // redirect the browser to another page,
            // "google.com" in our example here, then
            // return false at the end of this block.
            // Note that this also prevents event bubbling,
            // which is probably what we want here, but won't 
            // always be the case.
            return false;
          }
        }
    </script>
</head>
<body>
    <a id="mylink" href="http://www.google.com">linky</a>        
</body>
</html>
EndangeredMassa
источник
26
Можете ли вы объяснить, почему это лучше, чем принятый в настоящее время ответ, и куда должен идти сценарий на странице (потому что это довольно явно вопрос начального уровня)?
Билл Ящерица
8
Конечно вещь. Обновлено.
EndangeredMassa
6
Итак, что я могу добавить, hrefесли я не хочу перенаправлять пользователя и просто хочу запустить какой-то код? Изменить: Я вижу , что он может быть оставлен пустым: href="".
SabreWolfy
6
Почему лучше добавлять onclickсобытие через window.onload, а не вставлять onclickнепосредственно в <a>тег?
Натан Рид
10
Что если одна из ваших проблем заключается в том, что вы не хотите разделять свою функциональную единицу работы на разные физические места в исходном файле или распределять по множеству исходных файлов. Если вы поместите вызов javascript в тег href, это будет очень ясно, если посмотреть на одну строку, что происходит. Я был бы обеспокоен разделением этой функциональности на разные физические места, где сложнее получить представление о происходящем. Может быть, это просто мой стиль.
Stu
47 
<a href="javascript:alert('Hello!');">Clicky</a>

РЕДАКТИРОВАТЬ, годы спустя: НЕТ! Никогда не делай этого! Я был молодым и глупым!

Снова измените: пару человек спросили, почему вы не должны этого делать. Есть несколько причин:

  1. Представление: HTML должен сосредоточиться на представлении. Помещение JS в HREF означает, что ваш HTML теперь вроде как работает с бизнес-логикой.

  2. Безопасность: JavaScript в вашем HTML-коде нарушает Политику безопасности контента (CSP) . Политика безопасности контента (CSP) - это дополнительный уровень безопасности, который помогает обнаруживать и смягчать определенные типы атак, включая межсайтовый скриптинг (XSS) и атаки с использованием данных. Эти атаки используются для всего: от кражи данных до порчи сайта или распространения вредоносных программ. Узнайте больше здесь .

  3. Доступность: теги привязки предназначены для ссылки на другие документы / страницы / ресурсы. Если ваша ссылка никуда не идет, это должна быть кнопка . Это позволяет читателям экрана, терминалам Брайля и т. Д. Намного легче определять, что происходит, и дает пользователям с нарушениями зрения полезную информацию.

Мэтт Гранде
источник
16
Возможно, какое-то описание проблем с этим методом? Это хуже чем href='#'и alert()в onclick?
Томас Ахл
3
Я новичок в javascript и не понимаю, что с этим не так. Любое объяснение было бы неплохо
nilanjanaLodh
1
Привет, я также не уверен, почему бы не использовать это? Я застрял в сценарии, где мне нужно вызвать функцию JS, но все, что я могу указать, это ссылка. И ваше решение сработало.
skapie19
43

И почему бы не ненавязчиво с jQuery:

  $(function() {
    $("#unobtrusive").click(function(e) {
      e.preventDefault(); // if desired...
      // other methods to call...
    });
  });

HTML

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Мистер Лаки
источник
2
Будет ли это работать для SEO таким образом, что сканеры найдут ссылку и перейдут по ней?
Ахи тунец
11
потому что не все используют jquery.
сту
1
@GregMiernicki Да и нет, в зависимости от того, что вы подразумеваете под ссылкой. Посмотрите на HTML. Веб-сканер или любой клиент с отключенным javascript посетит данный HREF. Клиенты с поддержкой Javascript будут запускать действие click, а затем переходить по ссылке, если эта функция не возвращает ложное значение или не вызывает protectDefault. В этом случае href является запасным вариантом, поэтому его называют «ненавязчивым»
Эван Ланглуа,
12

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

  1. ссылка загружается как обычно:

    <a id="DaLink" href="http://host/toAnewPage.html"> нажмите здесь </a>

это важно, потому что это будет работать для браузеров с отключенным javascript или если в коде javascript есть ошибка, которая не работает.

  1. JavaScript запускается при загрузке страницы:

     window.onload = function(){
        document.getElementById("DaLink").onclick = function(){
               if(funcitonToCall()){
                   // most important step in this whole process
                   return false;
               }
        }
 }

  2. если javascript работает успешно, возможно, загружая содержимое текущей страницы с помощью javascript, возвращаемое значение false отменяет срабатывание ссылки. другими словами, установка return false приводит к отключению ссылки, если JavaScript успешно работал. Позволяя ему работать, если javascript этого не делает, делает хорошую резервную копию, чтобы ваш контент отображался в любом случае, для поисковых систем и если ваш код ломается, или просматривается в не-JavaScript-системе.

Лучшая книга на эту тему - «Дом сценариев» Джереми Кейта

Огненная ворона
источник
9

Или, если вы используете PrototypeJS

<script type="text/javascript>
  Event.observe( $('thelink'), 'click', function(event) {
      //do stuff

      Event.stop(event);
  }
</script>

<a href="#" id="thelink">This is the link</a>
Марк Бик
источник
1
Мне нравится не помещать функции обработки событий в линию.
Марк Бик
1
Это единственный путь. Пожалуйста, проголосуйте за встроенные ответы. Это практика, которой нет оправдания в наши дни.
Эндрю Хеджес
5
@ Эндрю: Пожалуйста, оставьте комментарий вместе со своим отрицательным голосом, объясняющим, почему встроенные ответы плохие.
Билл Ящерица
8

Я думаю, что вы можете использовать onclickсобытие, что-то вроде этого:

<a onclick="jsFunction();">
Дэвид З
источник
0

основанный на использовании ответа @mister_lucky с jquery:

$('#unobtrusive').on('click',function (e) {
    e.preventDefault(); //optional
    //some code
});

HTML-код:

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Мостафа Асади
источник
-2

просто используйте JavaScript: ---- пример

javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })
Доми С Эрдиан
источник