Jaka jest różnica między różnymi metodami umieszczania kodu JavaScript w an?

Widziałem następujące metody umieszczania kodu JavaScript w znaczniku <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>

Rozumiem ideę próby umieszczenia poprawnego adresu URL zamiast kodu JavaScript, na wypadek, gdyby użytkownik nie miał włączonej obsługi JavaScript. Ale na potrzeby tej dyskusji muszę założyć, że JavaScript jest włączony(nie mogą się bez niego zalogować).

Osobiście podoba mi się opcja 2, ponieważ pozwala na zobaczenie co będzie uruchamiane - szczególnie przydatne podczas debugowania, gdzie są parametry przekazywane do funkcji. Używałem go dość dużo i nie znalazłem problemów z przeglądarką.

Czytałem, że ludzie polecają 4, ponieważ daje użytkownikowi prawdziwy link do naśladowania, ale tak naprawdę # nie jest "prawdziwy". To nie pójdzie zupełnie gdzie.

Czy jest taki, który nie obsługuje lub jest naprawdę zły, gdy wiesz, że Użytkownik ma włączoną obsługę JavaScript?

Pytanie powiązane: Href dla JavaScript linki: "# "czy"javascript:void(0)"?.

Author: Community, 2008-10-29
Source

7 answers

Bardzo lubię Matt Kruse ' s JavaScript Best Practices article . W nim stwierdza, że używanie sekcji href do wykonywania kodu JavaScript jest złym pomysłem. Nawet jeśli stwierdziłeś, że Twoi użytkownicy muszą mieć włączoną obsługę JavaScript, nie ma powodu, abyś nie mógł mieć prostej strony HTML, na którą wszystkie twoje linki JavaScript mogą wskazywać dla ich sekcji href w przypadku, gdy ktoś wyłączy JavaScript po zalogowaniu. Gorąco zachęcam do dalszego dopuszczania tego mechanizm. Coś takiego będzie stosować się do "najlepszych praktyk" i osiągnąć swój cel: {]} 

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
 63
Author: cowgod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-02 14:02:17

Dlaczego to robisz, skoro możesz użyć addEventListener/attachEvent? Jeśli nie ma href-odpowiednika, nie używaj <a>, używaj <button> i odpowiednio go stylizuj.

 10
Author: eyelidlessness,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-01 05:32:45

Zapomniałeś o innej metodzie: 

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

Z kodem JavaScript: 

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

Nie mogę skomentować, która z opcji ma najlepsze wsparcie lub która jest semantycznie najlepsza, ale powiem tylko, że znacznie wolę ten styl, ponieważ oddziela treść od kodu JavaScript. Utrzymuje cały kod JavaScript razem, co jest znacznie łatwiejsze w utrzymaniu( zwłaszcza jeśli stosujesz to do wielu linków), a nawet można umieścić go w zewnętrznym pliku, który można następnie spakować aby zmniejszyć rozmiar pliku i buforowane przez przeglądarki klienckie.

 4
Author: nickf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-02 14:06:07 
<a href="#" onClick="DoSomething(); return false;">link</a>

Zrobię to, albo: 

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

W zależności od sytuacji. W przypadku większych aplikacji najlepsza jest druga, ponieważ konsoliduje kod zdarzenia.

 3
Author: nlaq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-10 04:12:24

Metoda # 2 ma błąd składni w FF3 i IE7. Preferuję metody #1 i # 3, Ponieważ #4 brudny URI z ' # ' chociaż powoduje mniej pisania... Oczywiście, jak zauważają inne odpowiedzi, najlepszym rozwiązaniem jest oddzielenie html od obsługi zdarzeń.

 1
Author: Pier Luigi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-29 07:19:58

Tylko nowoczesne przeglądarki 

<!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>

Cross-browser 

<!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>

Możesz to uruchomić, zanim dokument będzie gotowy, kliknięcie przycisków zadziała, ponieważ dołączamy Zdarzenie do dokumentu.

Źródła:

 1
Author: Timo Huovinen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:17:47

Jedną różnicę zauważyłem między tym: 

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

I to: 

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

Jest to, że jeśli w obu przypadkach masz: 

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

Wtedy w pierwszym przykładzie act2 będzie działać przed act1, a w drugim przykładzie będzie odwrotnie.

 0
Author: JoelFan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-01 17:48:48