JavaScript kodunu bir <a> içine koymanın farklı yöntemleri arasındaki fark nedir?

87

JavaScript kodunu bir <a>etikete yerleştirmenin aşağıdaki yöntemlerini gördüm :

function DoSomething() { ... return false; }

<a href="javascript:;" onClick="return DoSomething();">link</a>
<a href="javascript:DoSomething();">link</a>
<a href="javascript:void(0);" onClick="return DoSomething();">link</a>
<a href="#" onClick="return DoSomething();">link</a>

Kullanıcının JavaScript'i etkinleştirmemiş olması durumunda, sadece JavaScript kodu yerine geçerli bir URL koymaya çalışma fikrini anlıyorum. Ancak bu tartışmanın amacı için JavaScript'in etkin olduğunu varsaymam gerekiyor (onsuz oturum açamazlar).

Ben şahsen seçenek 2'yi seviyorum, çünkü neyin çalıştırılacağını görmenize izin veriyor - özellikle işleve geçirilen parametrelerin olduğu yerlerde hata ayıklarken kullanışlıdır. Oldukça kullandım ve tarayıcı sorunları bulamadım.

İnsanların 4'ü önerdiğini okudum, çünkü kullanıcıya takip etmesi için gerçek bir bağlantı veriyor, ama gerçekten # "gerçek" değil. Kesinlikle hiçbir yere gitmeyecek.

Kullanıcının JavaScript'i etkinleştirdiğini bildiğiniz zaman, desteklenmeyen veya gerçekten kötü olan bir tane var mı?

İlgili soru: JavaScript bağlantıları için Href: "#" veya "javascript: void (0)"? .

javascript html href

— Darryl Hein
kaynak

Küçük sözdizimi sorunu: 2.

— seçenek

Lütfen kabul edilen cevabı @eyelidlessness cevabı olarak değiştirin. Bence en iyi yaklaşım bu çünkü anlambilimle ilgileniyor.

— Michał Perłakowski

69

Matt Kruse'nin Javascript Best Practices makalesini çok beğeniyorum . İçinde, hrefJavaScript kodunu çalıştırmak için bölümü kullanmanın kötü bir fikir olduğunu belirtiyor . Kullanıcılarınızın JavaScript'i etkinleştirmesi gerektiğini belirtmiş olsanız bile href, birisinin oturum açtıktan sonra JavaScript'i kapatması durumunda, tüm JavaScript bağlantılarınızın kendi bölümleri için işaret edebileceği basit bir HTML sayfasına sahip olamayacağınız hiçbir neden yoktur . Bu geri dönüş mekanizmasına hala izin vermenizi şiddetle tavsiye ederim. Bunun gibi bir şey, "en iyi uygulamalara" bağlı kalacak ve hedefinize ulaşacaktır:

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

— inek tanrısı
kaynak

4

href değeri kullanıcıya durum çubuğunda gösterilecek mi? (alttaki çubuk) Biraz daha kullanıcı dostu bir bağlantı kullanmayı düşünürdüm örneğin. "js.html? doSomething" sayfa yine de statik html olabilir. Bu şekilde, kullanıcı bağlantılar arasındaki farkı açıkça görecektir.

— Gene

7

Bu değeri title özniteliğiyle geçersiz kılabilirsiniz, örneğin <a href="javascript_required.html" title="Does Something" onclick="doSomething(); return false;"> go </a>

— Derleyici

İstekleri javascript_required.html sayfasına günlüğe kaydetmek ve hataya neden olan işlevi günlüğe kaydetmek en iyi uygulama olmalıdır.

— Timo Huovinen

2

SEO'nun sonuçlarını düşündünüz mü?

— DanielBlazquez

Matt Kruse'nin javascripttoolbox.com'u çevrimdışı ve satılık görünüyor.

— showdev

10

addEventListener/ Kullanabildiğin zaman bunu neden yapıyorsun attachEvent? Hiçbir yoksa href-eşdeğer, bir kullanmayan <a>bir kullanma <button>ve buna göre stil onu.

— göz kapaksızlık
kaynak

9

Bağlantı yerine düğme kullanmak çoğu durumda uygun bir seçenek değildir.

— nickf

2

Çünkü çirkin görünüyor. Bağlantının yanına bir simge ekleyebilirsiniz. Tarayıcılar arasında aynı şekilde biçimlendirmek zordur. Ve genel olarak, insanlar düğmeler yerine bağlantılara geçiyorlar - çoğu yığının akışına bakın.

— Darryl Hein

2

Çirkin mi görünüyor? Nasıl görünmesini istersen öyle görünüyor. Aslında, düğmelerin aslında bağlantılardan daha fazla stil esnekliğine sahip olduğunu düşünüyorum, çünkü satır içi olmaları ancak tarayıcılar arasında düzgün bir şekilde doldurma alabilirler. Bir bağlantıyla yapılabilecek her şey, CSS ile ilgili olarak bir düğme ile yapılabilir.

— göz kapaksızlık

2

Span klavye odaklı olamaz.

— bobince

3

Ve düğme (gasp) anlamsal olarak doğru. Span anlamsal olarak anlamsızdır. Bir düğme tam olarak yazar anlamsal kullanmak düşündüğü.

— gözkapaksızlık

5

Başka bir yöntemi unuttunuz:

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

JavaScript kodu ile:

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

Seçeneklerden hangisinin en iyi desteğe sahip olduğu veya hangisinin anlamsal olarak en iyisi olduğu konusunda yorum yapamam, ancak sadece bu stili çok tercih ettiğimi çünkü içeriğinizi JavaScript kodunuzdan ayırdığını söyleyeceğim. Tüm JavaScript kodunu bir arada tutar, bakımı çok daha kolaydır (özellikle bunu birçok bağlantıya uyguluyorsanız) ve hatta daha sonra dosya boyutunu azaltmak için paketlenebilen ve istemci tarayıcıları tarafından önbelleğe alınabilen harici bir dosyaya bile koyabilirsiniz.

— nickf
kaynak

7

JS ile 20 veya 30 farklı bağlantınız varsa, bu oldukça sıkıcı olabilir ve çok fazla JS ile sonuçlanabilir.

— Darryl Hein

javascript'i değiştirmek için HTML'de dolaşmaktan daha sıkıcı değil. ... veya jQuery gibi birden çok

— öğedeki

1

@JKirchartz Cevabın arkasında nedenler varsa nasıl vaaz verdiğini anlamıyorum. Soruyu okursanız, bu gerçekten bir "bu 4'ün hangisi en iyisidir" ve ben onun düşünmediği başka bir seçenek olduğunu söyledim.

— nickf

Umurumda değil, trololo, ABC ve D arasında seçim yaparken E'yi seçmiyor.

— JKirchartz

3

@JKirchartz Evet, o zaman Stack Overflow'un amacını anladığınızı sanmıyorum. Birisi "Hangisi bir web uygulaması oluşturmak daha iyidir: Cobol veya Fortran?" O kişiye tüm olasılıkları düşünmediğini söylemek kabul edilebilir. Soru açıkça " bu dört şeyden hangisinin en iyisi olduğunu" sormuyor .

— nickf

3

<a href="#" onClick="DoSomething(); return false;">link</a>

Bunu yapacağım veya:

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

Duruma göre değişir. Daha büyük uygulamalar için ikincisi en iyisidir çünkü o zaman olay kodunuzu birleştirir.

— Anik İslam Abhi
kaynak

JS ile 20 veya 30 farklı bağlantınız varsa, bu oldukça sıkıcı olabilir ve çok fazla JS ile sonuçlanabilir.

— Darryl Hein

ve kodunuza sızan hataların ayıklanması ÇOK zor olabilir. İlk örneğinizden de anlaşılacağı gibi, bu hatalar çok kolay ortaya çıkıyor. :)

— nickf

1

Yöntem # 2, FF3 ve IE7'de sözdizimi hatası içeriyor. Yöntem # 1 ve # 3'ü tercih ederim, çünkü # 4, URI'yi '#' ile kirletmesine rağmen daha az yazıma neden oluyor ... Açıkçası, diğer yanıtlarda belirtildiği gibi, en iyi çözüm olay işlemeden ayrı html'dir.

— Pier Luigi
kaynak

Yöntem 2 neyin? Sorular, SİZİN onları gördüğünüz sırayla aynı kalmaz.

— Diodeus - James MacFarlane

Yöntem # 4 , emin olursanız URI'yi bozmaz return false. Bu nedenle, 4. yöntem muhtemelen en iyisidir (listelenenlerden).

— Már Örlygsson

2

@Diodeus, Pier'in soru içindeki numaralandırılmış listeye atıfta bulunduğuna inanıyorum , aslında soru ilk başta gönderildiği günden beri orada duruyor .

— göz kapaksızlık

1

Bunun arasında fark ettiğim bir fark:

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

ve bu:

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

her iki durumda da şunlara sahipseniz:

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

daha sonra ilk örnek için, önce act2çalışacak act1ve ikinci örnekte, tam tersi olacaktır.

— JoelFan
kaynak

1

Yalnızca modern tarayıcılar

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

Çapraz tarayıcı

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

Bunu belge hazır olmadan çalıştırabilirsiniz, düğmelere tıklamak işe yarayacaktır çünkü olayı belgeye ekliyoruz.

Kaynaklar:

— Timo Huovinen
kaynak