it-swarm-tr.com

JavaScript bağlantıları, "#" veya "javascript: void (0)" için hangi "href" değerini kullanmalıyım?

Aşağıdakiler, yalnızca JavaScript kodunu çalıştırma amacına sahip olan bir bağlantı oluşturmanın iki yöntemidir. İşlevsellik, sayfa yükleme hızı, doğrulama amaçları vb. Açısından hangisi daha iyidir?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

veya

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
3863
2cBGj7vsfp

javascript:void(0) kullanıyorum.

Üç nedeni. Geliştiricilerden oluşan bir ekip arasında # kullanımının teşvik edilmesi kaçınılmaz olarak, bazılarına şöyle denilen fonksiyonun dönüş değerini kullanma yol açar:

function doSomething() {
    //Some code
    return false;
}

Ama onclick'de return doSomething() işlevini kullanmayı unuturlar ve sadece doSomething() işlevini kullanırlar.

# 'dan kaçınmanın ikinci bir nedeni, çağrılan işlev bir hata atarsa, son return false; dosyasının çalışmayacağınındır. Bu nedenle, geliştiricilerin çağrılan işlevdeki herhangi bir hatayı uygun şekilde ele almayı da hatırlamaları gerekir.

Üçüncü bir sebep, onclick olay özelliğinin dinamik olarak atandığı durumlar olmasıdır. Bir işlevi çağırabilir veya işlevi bir ek yöntemi veya başka bir yöntem için özel olarak kodlamak zorunda kalmadan dinamik olarak atamayı tercih ederim. Bu nedenle, HTML işaretlemesindeki onclick (veya herhangi bir şeyde) şöyle görünür:

onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"

javascript:void(0) işlevini kullanmak yukarıdaki tüm baş ağrılarından kaçınır ve bir dezavantaj örneği bulamadım.

Yani eğer yalnız bir geliştiriciyseniz, kendi seçiminizi açıkça yapabilirsiniz, ancak bir takım olarak çalışıyorsanız, her ikisini de yapmanız gerekir:

href="#" kullanın, onclick dosyasının daima return false; içerdiğinden emin olun, çağrılan herhangi bir fonksiyonun bir hata atmadığından ve onclick özelliğine dinamik olarak bir işlev eklerseniz, false işlevinin bir hata atmadığından emin olun.

OR

href="javascript:void(0)" kullanın

İkincisi iletişim kurmak için açıkça çok daha kolaydır.

2091
AnthonyWJones

Ne.

HREF olarak kullanmak mantıklı bir URL olabilir. Birisi, yeni bir sekme açmak için bağlantınızı orta tıklarsa veya JavaScript’i devre dışı bıraktıysa, tıklama başlamaz.

Bu mümkün değilse, en azından bağlantı etiketini belgeye JavaScript ve uygun tıklama olay işleyicileri ile enjekte etmeniz gerekir.

Bunun her zaman mümkün olmadığının farkındayım, ancak bence halka açık bir web sitesi geliştirmek için çaba gösterilmesi gerekiyor.

ÇıkışGöze çarpmayan JavaScriptveAşamalı geliştirme(her ikisi de Wikipedia).

1251
Aaron Wagner

<a href="#" onclick="myJsFunc();">Link</a> veya <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> veya onclick niteliğini içeren başka bir şey yapmak, beş yıl önce tamam oldu, ancak şimdi kötü bir uygulama olabilir. İşte nedeni:

  1. Korunması zor ve ölçeklendirilmesi zor olan rahatsız edici JavaScript uygulamasını desteklemektedir. Bu konuda daha fazlaGöze çarpmayan JavaScript.

  2. Vaktinizi inanılmaz derecede aşırı ayrıntılı kod yazmak için harcıyorsunuz - ki bu kod kodunuz için çok az (varsa) yararı yoktur.

  3. İstenilen sonucu elde etmenin daha iyi, daha kolay ve daha bakımlı ve ölçeklenebilir yolları var.

Göze batmayan JavaScript yolu

Sadece bir href özniteliği yok! Herhangi bir iyi CSS sıfırlaması, eksik olan varsayılan imleç stiline bakar, bu da sorun olmaz. Ardından JavaScript işlevselliğini zarif ve göze çarpmayan en iyi uygulamaları kullanarak ekleyin - bu, JavaScript mantığınız işaretlemeniz yerine JavaScript'te kaldığından daha fazla korunmalıdır - mantığınızın bölünmesini gerektiren büyük ölçekli JavaScript uygulamaları geliştirmeye başladığınızda çok önemlidir kara kutu bileşenleri ve şablonları. Bu konuda daha fazlasıBüyük Ölçekli JavaScript Uygulama Mimarisi

Basit kod örneği

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Bir kara kutuBackbone.jsexample

Ölçeklenebilir, kara kutu, Backbone.js bileşeni örneği için -buradaki çalışma jsfiddle örneğine bakın. Göze çarpmayan JavaScript uygulamalarını nasıl kullandığımıza dikkat edin ve çok az miktarda kodda, farklı bileşen örnekleri arasında yan etkiler veya çatışmalar olmadan sayfa boyunca birçok kez tekrarlanabilen bir bileşen var. Şaşırtıcı!

Notlar

  • href öğesinde a özniteliğini atlamak, öğeye tab anahtar gezinti kullanılarak erişilememesine neden olur. Bu öğelere tab tuşuyla erişilmesini istiyorsanız, tabindex niteliğini ayarlayabilir veya bunun yerine button öğelerini kullanabilirsiniz. Düğme öğelerini,Tracker1'in cevabı'de belirtildiği gibi normal bağlantılar gibi görünecek şekilde kolayca stillendirebilirsiniz.

  • href öğesinde a özniteliğini atlamak, Internet Explorer 6 ve Internet Explorer 7 'nin a:hover stilini üstlenmemesine neden olur; bu nedenle, bunun yerine a.hover yoluyla bunu gerçekleştirmek için basit bir JavaScript shim ekledik. Bu, tamamıyla sorun değil, sanki bir href özniteliğiniz yok ve zarif bir bozulma yokmuş gibi, o zaman bağlantınız yine de işe yaramaz - ve endişelenmeniz gereken daha büyük sorunlarınız olacaktır.

  • İşleminizin hala JavaScript devre dışı olarak çalışmasını istiyorsanız, o zaman Ajax isteği yerine işlemi manuel olarak gerçekleştirecek bir URL'ye giden a özniteliğine sahip bir href öğesi kullanın ya da ne şekilde olursa olsun. Bunu yapıyorsanız, düğmenin ne zaman tıklandığından bağlantıyı takip etmediğinden emin olmak için tıklama çağrınızda event.preventDefault() işlevini yaptığınızdan emin olmak istersiniz. Bu seçenek zarif bozulma olarak adlandırılır.

758
balupton

'#', kullanıcıyı sayfanın başına döndürür, bu yüzden genellikle void(0) ile giderim.

javascript:; ayrıca javascript:void(0); gibi davranır

302
Adam Tuttle

Ben de dürüstçe öneririm. Bu davranış için stilize bir <button></button> kullanırdım.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

Bu şekilde onclick'inizi atayabilirsiniz. Ayrıca, element etiketindeki onclick niteliğini kullanmamak için komut dosyası yoluyla ciltlemeyi öneririm. Sadece getcha, engellenemeyen eski IE'lerde psuedo 3d metin efektidir.


Eğer,A elementini kullanmalıysa, belirtilen sebeplerden dolayı javascript:void(0); işlevini kullanın.

  • Onclick etkinliğinizin başarısız olması durumunda daima araya girecektir.
  • Hatalı yükleme çağrıları gerçekleşmeyecek veya karma değişikliğine dayalı diğer olayları tetiklemeyecek
  • Karma etiketi, tıklama düşerse (onclick atar), uygun bir düşme davranışı değilse ve gezinti geçmişini değiştirmek istemediğinizden kaçının, beklenmeyen davranışlara neden olabilir.

NOT: 0 öğesini, tıklamanın gerçekte ne yapacağını gösteren ekstra bir gösterge görevi görebilecek javascript:void('Delete record 123') gibi bir dize ile değiştirebilirsiniz.

244
Tracker1

İlki, ideal olarak kullanıcının JavaScript'i devre dışı bırakması durumunda izlenecek gerçek bir bağlantı ile. JavaScript çalıştırılırsa, click olayının patlamasını önlemek için false döndürdüğünüzden emin olun.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Angular2 kullanıyorsanız, bu şekilde çalışır:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Buraya bakın https://stackoverflow.com/a/45465728/2803344

136
Zach

Bana sorarsan;

Eğer "link" iniz bazı JavaScript kodlarını çalıştırma amacına sahipse, link olarak nitelenmez; bunun yerine JavaScript işlevli bir metin parçası. Bir bağlantıyı taklit etmek için kendisine bir <span> ekli bir onclick handler etiketi ve bazı temel CSS'leri kullanmanızı öneririm. Navigasyon için bağlantılar oluşturulur ve JavaScript kodunuz navigasyon için değilse bir <a> etiketi olmamalıdır.

Örnek:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>
95
fijter

İdeal olarak bunu yaparsınız:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Ya da daha iyisi, HTML’de varsayılan eylem bağlantısına sahip olacaktınız ve onclick olayını DOM oluşturulduktan sonra JavaScript aracılığıyla göze çarpmayan bir şekilde JavaScript aracılığıyla ekleyeceksiniz, böylece JavaScript'in bulunmaması/kullanılmaması için İşe yaramaz olay işleyicileri, kodunuzu karıştırmaya ve potansiyel olarak asıl içeriğinizi rahatsız etmemeye (veya en azından dikkatini dağıtmaya) dikkat edin.

95
Steve Paulo

Sadece # kullanmak bazı komik hareketler yapar, bu yüzden #self yazma çabalarından tasarruf etmek istiyorsanız JavaScript bla, bla, kullanmanızı öneririm.

75
Spammer Joe

Aşağıdakileri kullanıyorum

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

yerine

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>
63
se_pavel

Başka bir yerde href niteliğinde normal URL kullanmanız gerektiğini belirten önerileri kabul ediyorum, ardından onclick'te JavaScript işlevini çağırmalıyım. Kusur, aramadan sonra otomatik olarak return false eklemeleridir.

Bu yaklaşımla ilgili sorun, eğer işlev çalışmazsa veya herhangi bir sorun olursa, bağlantının anlaşılmaz hale gelmesidir. Onclick olayı her zaman false değerini döndürür, böylece normal URL çağrılmaz.

Çok basit bir çözüm var. Doğru çalışıyorsa, işlev true işlevini döndürelim. Ardından, tıklamanın iptal edilip edilmeyeceğini belirlemek için döndürülen değeri kullanın:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Unutmayın, doSomething() işlevinin sonucunu ihmal ettiğimi unutmayın. İşe yararsa, true değerini döndürür, bu nedenle reddedilir (false) ve path/to/some/URL çağrılmaz. İşlev false işlevini döndürürse (örneğin, tarayıcı işlev içinde kullanılan bir şeyi desteklemiyorsa veya başka bir şey yanlış giderse) true işlevine reddedilir ve path/to/some/URL adı verilir.

53
Fczbkk

#javascript:anything'dan daha iyidir, ancak aşağıdakiler daha da iyidir:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Her zaman zarif bir bozulma için çaba göstermelisiniz (kullanıcının JavaScript’i etkinleştirmemiş olması ... ve teknik özelliklere ve bütçeye uygun olması durumunda). Ayrıca, JavaScript niteliklerini ve protokolünü doğrudan HTML olarak kullanmak kötü bir form olarak kabul edilir.

50
Justin Johnson

JavaScript'i kullanarak bağlantıyı yazmadığınız sürece (böylece tarayıcıda etkin olduğunu biliyorsunuzdur), JavaScript devre dışı bırakılmış kişiler için ideal bir bağlantı sağlamanız ve ardından bağlantınızın varsayılan hareketini engellemeniz gerekir. olay işleyicisi. Bu şekilde, JavaScript etkin olanlar işlevi çalıştıracak ve JavaScript devre dışı olanlar sadece bağlantıya tıklamak ve hiçbir şey olmamak yerine uygun bir sayfaya (veya aynı sayfadaki konuma) atlayacaktır.

38
Simon Forrest

Kontrolün verilerde değişiklik yapması gerekiyorsa, bunun yerine bir <button> elemanı kullanmanızı öneririm özellikle . (Bir POST gibi bir şey.)

Öğeleri göze çarpmadan, bir çeşit ilerleyici geliştirme enjekte ederseniz daha da iyidir. (Bkz. bu yorum .)

37
phyzome

Kesinlikle hash (#) daha iyi çünkü JavaScript’te sahte bir kod var:

  1. geçmişi kirletiyor
  2. motorun yeni kopyasını başlattı
  3. küresel kapsamda çalışır ve etkinlik sistemine saygı duymaz.

Tabii ki "#" varsayılan eylemi engelleyen bir işleyiciyle işleyiciden [çok] daha iyidir. Üstelik, yalnızca JavaScript'i çalıştırma amacı olan bir bağlantı, kullanıcıyı bir şey ters gittiğinde sayfadaki bazı mantıklı bağlantılara (sadece # üste gönderir) göndermezseniz gerçekten "bir bağlantı" değildir. Sadece stil sayfasıyla bağlantı görünüm ve hissini taklit edebilir ve href hakkında unutabilirsiniz.

Ayrıca, cowgod'un önerisi ile ilgili olarak, özellikle bu: ...href="javascript_required.html" onclick="... Bu iyi bir yaklaşım, ancak "JavaScript devre dışı" ve "onclick başarısız" senaryoları arasında ayrım yapmıyor.

35
Free Consulting

Ben genellikle giderim

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Javascript'ten daha kısa: void (0) ve aynısını yapıyor.

30
dnetix

Kullanmak istiyorum:

<a href="#" onclick="myJsFunc();return false;">Link</a>

Sebepler:

  1. Bu href işlevini basitleştirir, arama motorlarının buna ihtiyacı vardır. Başka bir şey kullanırsanız (örneğin bir dize), 404 not found hatasına neden olabilir.
  2. Fare bağlantının üzerine geldiğinde, bunun bir komut dosyası olduğunu göstermez.
  3. return false; kullanarak, sayfa en üste atlamaz veya back düğmesini kırmaz.
27
Eric Yin

Ben javascript:void(0) kullanmayı seçtim, çünkü bunu kullanmak içerik menüsünü açmak için sağ tıklamayı engelleyebilir. Ama javascript:; daha kısa ve aynı şeyi yapıyor.

25
user564706

Dolayısıyla, bir <a /> etiketiyle bazı JavaScript şeyleri yaparken ve href="#" de koyarsanız, olayın sonuna false dönüş ekleyebilirsiniz (satır içi olay bağlama durumunda) like:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Veya JavaScript'i kullanarak href niteliğini değiştirebilirsiniz:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

veya

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Fakat anlamsal olarak, bunu başarmanın yukarıdaki tüm yolları yanlıştır (yine de iyi çalışır) . Sayfada gezinmek için herhangi bir öğe oluşturulmamışsa ve onunla ilişkili bazı JavaScript şeyleri varsa, o zaman bir <a> etiketi olmamalıdır.

Bir şey yapmak veya b, span gibi herhangi bir öğeyi veya ihtiyacınıza göre uygun olanı yapmak için bir <button /> kullanabilirsiniz, çünkü tüm öğelere etkinlik eklemenize izin verilir.


Yani, <a href="#"> kullanmak için bir fayda vardır. İmleç işaretçisini, a href="#" işlevini yaptığınızda varsayılan olarak bu öğenin üstüne getirirsiniz. Bunun için CSS'yi bu sorunu çözen cursor:pointer; gibi kullanabileceğinizi düşünüyorum.

Ve sonunda, etkinliği JavaScript kodunun kendisinden bağlıyorsanız, <a> etiketini kullanıyorsanız, bunu yapmak için event.preventDefault() işlevini yapabilirsiniz, ancak bunun için <a> etiketini kullanmıyorsanız, burada bir avantaj elde edersiniz. bunu yapmana gerek yok.

Yani, görürseniz, bu tür şeyler için bir etiket kullanmamak daha iyidir.

23
Ashish Kumar

JQuery kullanmak daha iyi olurdu,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

ve hem href="#" hem de href="javascript:void(0)" öğesini atlayın.

Bağlantı etiketi işaretlemesi gibi olur

<a onclick="hello()">Hello</a>

Yeterince basit!

22
naveen

Bağlantıları sadece JavaScript çalıştırmak için kullanmayın.

Href = "#" kullanımı, sayfayı yukarı kaydırır; void (0) kullanımı tarayıcıda gezinme sorunları yaratır.

Bunun yerine, bağlantıdan başka bir öğe kullanın:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

Ve CSS ile stil:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
22
Garrett

Eğer AngularJS kullanıyorsanız, aşağıdakileri kullanabilirsiniz:

<a href="">Do some fancy JavaScript</a>

Bu hiçbir şey yapmayacak.

Ek olarak

  • Sizi, (#) İle olduğu gibi sayfanın en üstüne götürmez
    • Bu nedenle, açıkça false dosyasını JavaScript ile döndürmeniz gerekmez
  • Kısa ve özlü
20
whirlwin

Genellikle, JavaScript'i devre dışı bırakan istemcilerin hala bazı işlevlere sahip olduğundan emin olmak için her zaman bir geri dönüş bağlantınız olmalıdır. Bu konsepte göze çarpmayan JavaScript denir.

Örnek ... Aşağıdaki arama bağlantınız olduğunu varsayalım:

<a href="search.php" id="searchLink">Search</a>

Her zaman aşağıdakileri yapabilirsiniz:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

Bu şekilde, JavaScript'i devre dışı bırakılmış kişiler search.php adresine yönlendirilirken, JavaScript'i görüntüleyenler gelişmiş işlevlerinizi görür.

19
Andrew Moore

href yoksa, belki de bir çapa etiketi kullanmak için bir neden yoktur.

Neredeyse her öğeye etkinlikler (tıklatma, gezinme vb.) Ekleyebilir, neden yalnızca span veya div kullanmıyorsunuz?

Ve JavaScript'i devre dışı bırakan kullanıcılar için: bir geri dönüş yoksa (örneğin alternatif bir href), bir <a> veya <span> etiketi ne olursa olsun, en azından o öğeyi göremez ve bunlarla etkileşime giremezler.

18
achairapart

Sahte bir ikilik sunduğuna inanıyorum. Bunlar sadece iki seçenek değil.

Bağlantı etiketini kullanıyor olsanız bile, burada gerçekten bir bağlantıya sahip olmadığınızı öneren D4V360 ile aynı fikirdeyim. Sahip olduğunuz tek şey biraz farklı davranması gereken bir belgenin özel bir bölümü. Bir <span> etiketi çok daha uygundur.

16
Clever Human

Her ikisini de Google Chrome'da geliştirici araçlarıyla denedim ve id="#" 0,32 saniye sürdü. javascript:void(0) yöntemi yalnızca 0.18 saniye sürdü. Dolayısıyla, google chrome'da javascript:void(0) daha iyi ve daha hızlı çalışır.

16
user6460587

Neyi başarmak istediğinize bağlı olarak, üzerini unutabilir ve sadece href'i kullanabilirsiniz:

<a href="javascript:myJsFunc()">Link Text</a>

Yanlış döndürme ihtiyacı etrafında olur. # seçeneğini beğenmedim, çünkü belirtildiği gibi, kullanıcıyı sayfanın en üstüne götürür. Eğer JavaScript'i etkinleştirmemişlerse (çalıştığım yerde nadir, ancak çok iyi bir fikir), kullanıcıyı gönderecek başka bir yeriniz varsa, Steve'in önerdiği yöntem harika çalışıyor.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Son olarak, kimsenin bir yere gitmesini istemiyorsanız ve bir JavaScript işlevini çağırmak istemiyorsanız javascript:void(0) işlevini kullanabilirsiniz. Bir mouseover olayının gerçekleşmesini istediğiniz bir resme sahipseniz harika çalışıyor, ancak kullanıcının tıklayacağı bir şey yok.

16
Will Read

Birkaç sahte link aldığımda, onlara 'linksiz' sınıfını vermeyi tercih ederim.

Sonra jQuery, aşağıdaki kodu eklerim:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

Ve HTML için, bağlantı basit

<a href="/" class="no-link">Faux-Link</a>

Çapalar için kullanılmadıkça Hash-Tag'leri kullanmayı sevmiyorum ve sadece ikiden fazla sahte link aldığımda yukarıdakileri yapıyorum, aksi halde javascript ile giderim: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Genellikle, sadece bir bağlantı kullanmaktan kaçınmayı ve bir şeyi bir yayılma noktasına sarmayı seviyorum ve bunu bir açılır pencere veya içerik gösterimi gibi bazı JavaScript kodlarını aktif hale getirmenin bir yolu olarak kullanın.

Ben şahsen onları kombinasyon halinde kullanıyorum. Örneğin:

HTML

<a href="#">Link</a>

biraz jQuery ile

$('a[href="#"]').attr('href','javascript:void(0);');

veya

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Ancak, kullanıcı boş bir çapa tıkladığında sayfanın en üste atlamasını önlemek için kullanıyorum. Nadiren onClick ve diğer on olaylarını doğrudan HTML olarak kullanıyorum.

Önerim, çapa yerine class niteliğiyle <span> öğesini kullanmak olacaktır. Örneğin:

<span class="link">Link</span>

Ardından işlevi, gövdeye sarılı bir komut dosyasıyla ve .link etiketinin hemen önünde veya harici bir JavaScript belgesinde </body> öğesine atayın.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Not: Dinamik olarak oluşturulmuş öğeler için şunları kullanın:

$('.link').on('click', function() {
    // do something
});

Ve dinamik olarak oluşturulan öğelerle oluşturulan dinamik olarak oluşturulan öğeler için şunları kullanın:

$(document).on('click','.link', function() {
    // do something
});

Ardından, yayılma öğesini küçük bir CSS ile bir çapa gibi görünecek şekilde biçimlendirebilirsiniz:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

İştea jsFiddleyukarıda belirtilenlerin bir örneği.

13
mdesdev

Temelde, ilerici geliştirmeyi kullanan bu pratik makale ifadesinden ötürü cümle yapıyorum. Kısa cevap, kullanıcı arayüzünüz zaten JavaScript'in etkin olduğu sonucuna varmadıkça asla javascript:void(0); veya # kullanmamanızdır, bu durumda javascript:void(0);kullanmalısınız. Ayrıca, yayılma işlevini bağlantılar olarak kullanmayın, çünkü bu başlangıçta anlamsal olarak yanlıştır.

Uygulamanızdaki/{Ana sayfa/İşlem/Parametreler gibi SEO dostu URL yollarını kullanmak da iyi bir uygulamadır. Önce JavaScript kullanmadan çalışan bir sayfaya bir bağlantınız varsa, daha sonra deneyimi artırabilirsiniz. Bir çalışma sayfasına gerçek bir bağlantı kullanın, sonra sunumu geliştirmek için bir onlick etkinliği ekleyin.

İşte bir örnek. Ana Sayfa/ChangePicture, kullanıcı arayüzü ve standart HTML gönderme butonları ile tamamlanmış bir sayfadaki bir forma çalışan bir bağlantıdır, ancak jQueryUI butonları ile modal bir diyaloga enjekte edilmek daha hoş görünür. Her iki şekilde de, mobil ilk geliştirmeyi karşılayan tarayıcıya bağlı olarak çalışır.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>
13
Josh Simerman

Bunun gibi bir çapaya bir ipucu da yazabilirsiniz:

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

böylece kullanıcı bu bağlantının ne yaptığını bilecektir.

11
Lukom

En iyi yolun, # Do1Not2Use3This4Id5 veya benzer bir kimlik gibi, hiç kimsenin kullanmayacağından ve insanları rahatsız etmeyeceğinden% 100 emin olmanız gibi, asla kullanmayacağınız bir kimliğe demir atmak olduğunu söyleyebilirim.

  1. Javascript:void(0) kötü bir fikirdir ve CSP etkin HTTPS sayfalarında İçerik Güvenliği Politikasını ihlal ediyor https://developer.mozilla.org/en/docs/Security/CSP (@ jakub.g sayesinde)
  2. Sadece # kullanmak, kullanıcının basıldığında en üste atlamasını sağlar
  3. JavaScript etkin değilse, sayfayı bozmaz (JavaScript algılama kodunuz yoksa)
  4. JavaScript etkinse, varsayılan etkinliği devre dışı bırakabilirsiniz
  5. Tarayıcınızın bir metin seçmesini nasıl engelleyeceğinizi bilmiyorsanız, href kullanmanız gerekir (4 kullanmanın tarayıcının metin seçmesini durduracak şeyi kaldırıp çıkarmayacağını bilemezsiniz).

Temel olarak, bu makalede 5'ten bahsetmeyen hiç kimse aniden bağlantı etrafında bir şeyler seçmeye başlarsa sitenizin profesyonelce ortaya çıkması nedeniyle önemli olduğunu düşünüyorum.

11
Anders M.

Sitenize JavaScript devre dışı bırakılmış kullanıcılar tarafından erişilebilir olması güzeldir; bu durumda href, yürütülen JavaScript ile aynı işlemi yapan bir sayfaya işaret eder. Aksi takdirde, varsayılan eylemi (sayfanın en üstüne kaydırın) diğerlerinin dediği gibi önlemek için "return false;" ile "#" kullanın.

"javascript:void(0)" için googling bu konuda çok fazla bilgi sağlar. Bazıları, bu gibi - NOT) void (0)kullanmayın.

10
mmacaulay

href için # değerlerini kullanmaya devam etmek isteyen kişilerin bir çok cevabı görüyorum, bu nedenle, her iki kampı da umutla tatmin eden bir cevap:

A) href değerim olarak javascript:void(0) seçeneğine sahip olduğum için mutluyum:

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B) JQuery kullanıyorum ve href değerim olarak # istiyorum:

<a href="#" onclick="someFunc.call(this)">Link Text</a>

<script type="text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

Bağlantıların dinamik olarak oluşturulmayacağını biliyorsanız, bunun yerine click işlevini kullanın:

$('a[href="#"]').click(function(e) {

9
dazbradbury

Burada hatırlanması gereken bir şey daha var. Bölüm 508 uygunluk. Bu nedenle, JAWS gibi ekran okuyucular için bağlantı etiketine odaklanabilmek için bağlantı etiketine ihtiyacınız olduğunu belirtmeniz gerektiğini düşünüyorum. Bu nedenle, çözüm "sadece JavaScript kullan ve başlangıçta demirlemeyi unut" seçeneği, bunun için bir seçenek değildir. JavaScript’i href içinde kullanmak yalnızca ekranın en üste atlayabilmesi için para alamıyorsanız gereklidir. 0 saniye boyunca bir ayar zamanı kullanabilir ve odaklanmanız gereken yere JavaScript ateşi verebilirsiniz ancak görüntü bile en başa ve daha sonra geri atlayacaktır.

9
rcof

Sahte bir davranış istediğim bağlantılar için href = "#" kullanıyorum. Sonra bu kodu kullanıyorum:

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

Anlamı Eğer href bir karma değere eşitse (* = "#"), varsayılan link davranışını önler, böylece hala bunun için işlevsellik yazmanıza izin verir ve çapa tıklamalarını etkilemez.

9
Vinny Fonseca

Anladığım kadarıyla sadece JavaScript kodunu çalıştırmak için bir bağlantı oluşturmak istiyorsunuz.

O zaman tarayıcılarında JavaScript'i engelleyen insanlar olduğunu düşünmelisiniz.

Bu yüzden, bu bağlantıyı yalnızca bir JavaScript işlevi çalıştırmak için kullanacaksanız, dinamik bir şekilde eklemelisiniz, böylece kullanıcılar tarayıcıda JavaScript'lerini etkinleştirmedi mi ve bu bağlantıyı yalnızca Tarayıcıda JavaScript devre dışı bırakıldığında böyle bir bağlantı kullanmanın hiçbir anlamı yoktur, bir JavaScript işlevini tetikleyin.

Bu nedenle, JavaScript devre dışı bırakıldığında ikisi de iyi değildir.

JavaScript etkinse ve bu bağlantıyı yalnızca bir JavaScript işlevi çağırmak için kullanmak istiyorsanız, ardından

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

kullanmaktan çok daha iyi bir yol

<a href="#" onclick="myJsFunc();">Link</a>

çünkü href = "#" sayfanın gerekmeyen işlemleri yapmasına neden olacak.

Ayrıca, <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> __ <a href="#" onclick="myJsFunc();">Link</a>'dan daha iyi olmasının bir başka nedeni de, JavaScript’in tarayıcıların çoğu için varsayılan komut dosyası dili olarak kullanılmasıdır. Örnek olarak, Internet Explorer kullanılacak olan betik dili türünü tanımlamak için bir onclick niteliği kullanır. Başka bir kodlama dili açılmazsa, JavaScript de Internet Explorer tarafından varsayılan olarak kullanılır, ancak başka bir kodlama dili javascript: kullanılırsa, İnternet Explorer'ın hangi kodlama dilinin kullanıldığını anlamasına izin verir.

Bunu göz önüne alarak kullanmayı ve egzersiz yapmayı tercih ederim.

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

bir alışkanlık haline getirmek ve daha kullanıcı dostu olmak için yeterince JavaScript koduna bu tür bağlantılar ekleyin:

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});
8
Berker Yüceer

Href kullanabilir ve yalnızca karma olan tüm bağlantıları kaldırabilirsiniz:

HTML:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});
8
vol7ron

Neden bunu kullanmıyorsun? Bu sayfa yukarı kaydırmaz.

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
8
AlxGol

İdeal olarak, JavaScript olmayan kullanıcılar için geri dönüş olarak gerçek bir URL’ye sahip olmanız gerekir.

Bu mantıklı değilse, href niteliği olarak # kullanın. JavaScript'i doğrudan HTML'ye gömdüğü için onclick niteliğini kullanmaktan hoşlanmıyorum. Harici bir JS dosyası kullanmak ve olay işleyicisini o bağlantıya eklemek daha iyi bir fikir olacaktır. Varsayılan olayı önleyebilir, böylece kullanıcı tıklattıktan sonra URL'nin # değerini eklemek üzere değişmesini önleyebilirsiniz.

7
Peter

Genel duyarlılıkla tamamen uyuşarak, ihtiyacınız olduğunda void(0) işlevini kullanın ve ihtiyacınız olduğunda geçerli bir URL kullanın.

URL yeniden yazma özelliğini kullanarak yalnızca JavaScript devre dışı bırakmak istediğiniz şeyi yapmakla kalmayacak URL’ler de oluşturabilirsiniz, ayrıca tam olarak ne yapacağını da söyleyebilirsiniz.

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

Sunucu tarafında, yalnızca URL'yi ve sorgu dizesini ayrıştırmanız ve istediğiniz şeyi yapmanız gerekir. Akıllıysanız, sunucu tarafı komut dosyasının hem Ajax'a hem de standart isteklere farklı şekilde yanıt vermesine izin verebilirsiniz. Sayfanızdaki tüm bağlantıları idare eden özlü bir merkezi kod almanızı sağlar.

URL yeniden yazma öğreticileri

Artıları

  • Durum çubuğunda gösterir
  • JavaScript'teki onclick handler ile Ajax'a kolayca yükseltilebilir
  • Pratik olarak kendini yorumlar
  • Dizinlerinizin tek kullanımlık HTML dosyalarıyla çevrelenmesini önler

Eksileri

  • JavaScript'te event.preventDefault () kullanılmalı mı?
  • Sunucu tarafında oldukça karmaşık yol işleme ve URL ayrıştırma.

Orada daha fazla mahkumlar olduğuna eminim. Onları tartışmaktan çekinmeyin.

7
user394888

Modern bir web sitesinde, öğe yalnızca JavaScript işlevi görüyorsa (gerçek bir bağlantı değil) href kullanımından kaçınılmalıdır.

Niye ya? Bu öğenin varlığı, tarayıcıya bunun bir hedefle bağlantı olduğunu söyler. Bununla, tarayıcı Yeni Sekmede Aç/Pencere işlevini gösterecektir (ayrıca shift + klik kullandığınızda da tetiklenir). Bunu yapmak, istenen işlevi tetiklemeden aynı kullanıcının açılmasıyla sonuçlanır (kullanıcı sıkıntılarına yol açar).

IE ile ilgili olarak: IE8'den itibaren, doktip ayarlanmışsa, öğe stili (hover dahil) çalışır. IE öğesinin diğer sürümleri artık gerçekten endişelenmiyor.

Yalnızca Dezavantaj: HREF'in çıkarılması tabindex'i kaldırır. Bunun üstesinden gelmek için, bağlantı olarak stillendirilmiş bir düğme kullanabilir veya JS kullanarak tabindex niteliği ekleyebilirsiniz.

7
TomDK

Bir <a> elemanı kullanıyorsanız, sadece şunu kullanın:

<a href="javascript:myJSFunc();" />myLink</a>

Şahsen bunun yerine daha sonra JavaScript içeren bir olay işleyici eklerdim (attachEvent veya addEventListener kullanarak veya belki de <favori JavaScript çerçevenizi buraya yerleştirin>).

7
Pablo Cabrera

URL’nizin gerekli olabileceği fikrini kaybetmeyin - referans takip edilmeden önce üzerine ateş atılır, bu nedenle bazen sayfada gitmeden önce müşteride bir şeyi işlemeniz gerekebilir.

7
nathaniel

Sadece diğerlerinden bahsettiğimiz noktayı tespit etmek için.

'Onload'a veya $ (' document ') olayını bağlamak daha iyidir. Ready {}; ardından JavaScript'i doğrudan click olayına yerleştirmek için.

JavaScript kullanılamıyorsa, geçerli URL'ye bir href ve belki de bağlantının konumuna bir çapa kullanırım. Sayfa, JavaScript kullanamayan ve farketmeyen kullanıcılar için hala kullanışlıdır.

Elimde olduğu gibi, işte size yardımcı olabilecek bazı jQuery:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);
6
Matt Goddard

- Bir bağlantıyı sadece bazı JavaScript kodları yürütmek için kullanıyorsanız (şiddetle tavsiye edilen D4V360 gibi bir aralık kullanmak yerine):

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

Gezinme için onclick olan bir bağlantı kullanıyorsanız, JavaScript kapalı olduğunda geri dönüş olarak href = "#" kullanmayın. Kullanıcı linke tıkladığında genellikle çok can sıkıcı bir durum. Bunun yerine, muşamba işleyicisinin mümkünse sağlayacağı aynı bağlantıyı sağlayın. Bunu yapamıyorsanız, tıklama işaretini atlayın ve sadece href'te bir JavaScript URI kullanın.

6
Shadow2531

JavaScript'imi HTML işaretlememden olabildiğince uzak tutmayı tercih ederim. Tıklama olayı işleyicileri olarak <a> kullanıyorum, o zaman <a class="trigger" href="#">Click me!</a> kullanmanızı öneririm.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

Dışarıdaki birçok geliştiricinin, tıklama etkinliği işleyicileri için bağlantı etiketi kullanmanın iyi olmadığına inandığını belirtmek çok önemlidir. Size <span> ekleyen bir CSS ile birlikte bir <div> veya cursor: pointer; kullanmanızı tercih ederler. Bu çok tartışma olursa bir konudur.

6
Jesse Atkinson

Siz anlamsız kodla kirletmemek için HTML'nizde inline onclick="something();" işlevini kullanmamalısınız; tüm tıklama ciltlemeleri Javascript dosyalarında (* .js) ayarlanmalıdır.

Bağlamayı şu şekilde ayarlayın: $('#myAnchor').click(function(){... **return false**;}); veya $('#myAnchor').bind('click', function(){... **return false**;});

Öyleyse, binlerce href="javascript:void(0);" ve sadece href="#"'suz yüklemesi kolay (ve seo dostu) temiz bir HTML dosyanız var.

6
G. Ghez

İşte eksiksizlik uğruna bir seçenek daha, JavaScript devre dışı bırakılsa bile bağlantının bir şey yapmasını engelliyor :)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

Kimlik sayfada bulunmuyorsa, bağlantı hiçbir şey yapmaz.

Genelde Aaron Wagner'in cevabına katılıyorum, JavaScript bağlantısı belgeye JavaScript koduyla enjekte edilmelidir.

3
Timo Huovinen

Javascript: void(0);, null değerine geçersizdir/ [Atanmamış] , bu, tarayıcınızın NULL'a gideceği anlamına gelir/DOM' ye ve pencerenin false değerine dönmesidir.
'#', javascript'teki DOM veya Pencereyi takip etmiyor. bu, çapa hrefindeki '#' işaretinin anlamı aLINK. Aynı akım yönüne bağlayın.

2
SchoolforDesign

2019 Ocak tarihinde düzenlendi

HTML5 içinde, href özniteliği olmayan bir öğe kullanmak valid şeklindedir. Bir "yer tutucu köprü" olarak kabul edilir

Eğer eleman bir href özniteliğine sahip değilse, o zaman eleman, sadece elemanın içeriğinden oluşan, eğer uygun olsaydı, bir bağlantının yerleştirilebileceği bir yer tutucuyu temsil eder.

Örnek:

<a>previous</a>

Bundan sonra aksi takdirde yapmak istiyorsanız:

1 - Bağlantınız hiçbir yere gitmezse, bir <a> elemanı kullanmayın. Bir <span> veya başka uygun bir şey kullanın ve istediğiniz şekilde biçimlendirmek için CSS :hover ekleyin.

2 - Ham, hassas ve hızlı olmak istiyorsanız javascript:void(0)OR javascript:undefined OR javascript:; kullanın.

2
Lyes CHIOUKH

Burada javascript: void (0) 'ı kullanarak başlık etiketini yönlendirmek için # etiketini durdurmak yerine # kullanabilirsiniz.

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
0
Javed Khan

En basit ve herkes tarafından kullanılan çoğunlukla javascript: void (0) Bunu kullanmak yerine #) durdurmak için kullanabilirsiniz başlık bölümüne yönlendirmeyi etiketleyin =.

<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>

function testFunction() {
    alert("hello world");
}
0
Dev pokhariya