В чем разница между различными методами помещения кода JavaScript в <a>? - PullRequest
Новая
       41

В чем разница между различными методами помещения кода JavaScript в <a>?

82 голосов
/ 29 октября 2008

Я видел следующие способы помещения кода JavaScript в тег <a>: 

function DoSomething() { ... return false; }
  1. <a href="javascript:;" onClick="return DoSomething();">link</a>
  2. <a href="javascript:DoSomething();">link</a>
  3. <a href="javascript:void(0);" onClick="return DoSomething();">link</a>
  4. <a href="#" onClick="return DoSomething();">link</a>

Я понимаю идею попытаться указать действительный URL-адрес вместо просто кода JavaScript, на тот случай, если у пользователя не включен JavaScript. Но для этого обсуждения мне нужно предположить, что JavaScript включен (они не могут войти без него).

Мне лично нравится вариант 2, так как он позволяет вам увидеть, что будет выполняться - особенно полезно при отладке, когда в функцию передаются параметры. Я использовал его немного и не нашел проблем с браузером.

Я читал, что люди рекомендуют 4, потому что это дает пользователю реальную ссылку для перехода, но на самом деле, # не является "реальным". Это никуда не денется.

Есть ли такая, которая не поддерживается или действительно плохая, если вы знаете, что у пользователя включен JavaScript?

Смежный вопрос: Href для ссылок JavaScript: «#» или «javascript: void (0)»? .

Ответы [ 7 ]

66 голосов
/ 29 октября 2008

Мне очень нравится Статья Мэтта Крузе о Javascript Best Practices . В нем он утверждает, что использование раздела href для выполнения кода JavaScript - плохая идея. Даже если вы заявили, что у ваших пользователей должен быть включен JavaScript, нет никакой причины, по которой у вас не может быть простой HTML-страницы, на которую могут ссылаться все ваши ссылки JavaScript для их раздела href в случае, если кто-то отключит JavaScript после вход в систему. Я настоятельно рекомендую вам разрешить этот резервный механизм. Примерно так будет придерживаться «лучших практик» и достигнуть вашей цели: 

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
10 голосов
/ 29 октября 2008

Зачем вам это делать, когда вы можете использовать addEventListener / attachEvent? Если нет href -эквивалента, не используйте <a>, используйте <button> и стилизуйте его соответственно.

4 голосов
/ 29 октября 2008

Вы забыли другой метод: 

5: <a href="#" id="myLink">Link</a>

С кодом JavaScript: 

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

Я не могу комментировать, какая из опций имеет лучшую поддержку или какая семантически лучшая, но я просто скажу, что я предпочитаю этот стиль, потому что он отделяет ваш контент от вашего кода JavaScript. Он хранит весь код JavaScript вместе, что намного проще в обслуживании (особенно если вы применяете это ко многим ссылкам), и вы даже можете поместить его во внешний файл, который затем можно упаковать для уменьшения размера файла и кэширования клиентскими браузерами.

3 голосов
/ 29 октября 2008 
<a href="#" onClick="DoSomething(); return false;">link</a>

Я сделаю это, или: 

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

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

1 голос
/ 01 июня 2014

Только современные браузеры 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

Кросс-браузер 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

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

Источники:

1 голос
/ 01 апреля 2014

Я заметил одно различие между этим: 

<a class="actor" href="javascript:act1()">Click me</a>

и это: 

<a class="actor" onclick="act1();">Click me</a>

в том случае, если в любом случае у вас есть: 

<script>$('.actor').click(act2);</script>

тогда для первого примера act2 будет выполняться до act1, а во втором примере будет наоборот.

1 голос
/ 29 октября 2008

Метод # 2 имеет синтаксическую ошибку в FF3 и IE7. Я предпочитаю методы № 1 и № 3, потому что № 4 грязный URI с «#», хотя вызывает меньше печатать ... Очевидно, что, как отмечалось в других ответах, лучшим решением является отделение html от обработки событий.

...