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

Aşağıda, yalnızca JavaScript kodunu çalıştırmak amacıyla bir bağlantı oluşturmanın iki yöntemi verilmiştir. İş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>

Ben kullanıyorum javascript:void(0).

Üç sebep. #Geliştiricilerden oluşan bir takımın kullanımını teşvik etmek kaçınılmaz olarak bazılarına şu şekilde adlandırılan işlevin dönüş değerini kullanmasına yol açar:

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

Ama sonra return doSomething()onclick'te kullanmayı ve sadece kullanmayı unutuyorlar doSomething().

Bundan kaçınmanın ikinci bir nedeni , çağrılan işlev bir hata atarsa #finalin return false;yürütülmemesidir. Bu nedenle geliştiriciler aynı zamanda çağrılan fonksiyondaki herhangi bir hatayı uygun şekilde ele almayı hatırlamalıdır.

Üçüncü neden, onclickevent özelliğinin dinamik olarak atandığı durumlar olmasıdır. Bir işlevi çağırabilir veya işlevi bir ek yöntem için özel olarak kodlamak zorunda kalmadan dinamik olarak atamayı tercih ederim. Dolayısıyla benim onclick(ya da bir şey üzerine) Böyle HTML işaretleme görünüm:

onclick="someFunc.call(this)"

VEYA

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

kullanma javascript:void(0) yukarıdaki tüm baş ağrılarını önler ve herhangi bir dezavantaj örneği bulamadım.

Eğer yalnız bir geliştiriciyseniz, o zaman kendi seçiminizi açıkça yapabilirsiniz, ancak bir ekip olarak çalışıyorsanız her iki durumu da belirtmeniz gerekir:

Kullanın href="#", sonunda onclickher zaman içerdiğinden return false;, çağrılan herhangi bir fonksiyonun hata atmadığından onclickemin olun ve özelliğe bir işlevi dinamik olarak eklerseniz , hata atmanın yanı sıra hata döndürmediğinden emin olun false.

VEYA

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

İkincisi açıkça iletişim kurmak çok daha kolay.

Ne.

Mantıklı bir URL'niz varsa bunu HREF olarak kullanın. Birisi yeni bir sekme açmak için bağlantınıza orta tıklarsa veya JavaScript devre dışı bırakılmışsa, onclick tetiklenmez.

Bu mümkün değilse, en azından bağlantı etiketini belgeye JavaScript ve uygun tıklama etkinliği işleyicileriyle enjekte etmelisiniz.

Bunun her zaman mümkün olmadığını anlıyorum, ancak bence herhangi bir kamu web sitesi geliştirmek için çaba gösterilmelidir.

Göze batmayan JavaScript ve Aşamalı geliştirmeye göz atın (her ikisi de Wikipedia).

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

1. Bu, bakımı zor ve ölçeklendirilmesi zor olduğu ortaya çıkan rahatsız edici JavaScript uygulamasını teşvik ediyor. Bu konuda daha fazla bilgi göze batmayan JavaScript .

2. Zamanınızı inanılmaz derecede ayrıntılı kod yazarak harcıyorsunuz - bu da kod tabanınıza çok az fayda sağlıyor (varsa).

3. Artık istenen sonucu elde etmenin daha iyi, daha kolay ve daha kolay korunabilir ve ölçeklenebilir yolları var.

Göze batmayan JavaScript yolu

Sadece bir hrefniteliği yok ! İyi bir CSS sıfırlaması, eksik varsayılan imleç stiliyle ilgilenir, bu nedenle sorun olmaz. Ardından, mantığınızın ayrılmasını gerektiren büyük ölçekli JavaScript uygulamaları geliştirmeye başladığınızda gerekli olan, zarif ve göze çarpmayan en iyi uygulamaları (JavaScript mantığınızın biçimlendirmeniz yerine JavaScript'te kalması nedeniyle daha sürdürülebilir) kullanarak JavaScript işlevlerinizi ekleyin. blackboxed bileşenler ve şablonlar. Bununla ilgili daha fazla bilgi Büyük Ölçekli JavaScript Uygulama Mimarisinde

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>

Kara kutulu Backbone.js örneği

Ölçeklenebilir, kara kutulu , Backbone.js bileşen örneği için buradaki jsfiddle örneğine bakın . Göze batmayan JavaScript uygulamalarını nasıl kullandığımıza ve az miktarda kodda, farklı bileşen örnekleri arasında yan etkiler veya çakışmalar olmadan sayfada birden çok kez tekrarlanabilen bir bileşene sahip olduğunuzu unutmayın. İnanılmaz!

notlar

• hrefÖzelliğin aöğe üzerinde atlanması, öğenin tabtuş gezinmesi kullanılarak erişilebilir olmamasına neden olur . Bu öğelere tabanahtar aracılığıyla erişilmesini istiyorsanız, tabindexözniteliği ayarlayabilir veya buttonbunun yerine öğeleri kullanabilirsiniz . Tracker1'in cevabında belirtildiği gibi normal elemanlara benzemek için düğme elemanlarına kolayca stil uygulayabilirsiniz .

• Öğe hrefüzerindeki özniteliğin atlanması, Internet Explorer 6 ve Internet Explorer 7'nin stil almamasına neden olur, bu yüzden bunun yerine bunu gerçekleştirmek için basit bir JavaScript şimi ekledik . Href özelliğiniz ve zarif bir bozulmanız yokmuş gibi, bağlantınız yine de çalışmaz - ve endişelenmeniz gereken daha büyük sorunlarınız olacak.aa:hovera.hover

• İşleminizin hala JavaScript devre dışı bırakılmış olarak çalışmasını istiyorsanız, işlemi Ajax isteği yerine veya gitmesi gereken her şey yerine manuel olarak gerçekleştirecek bir URL'ye asahip bir hrefniteliğe sahip bir öğe kullanmak . Bunu yapıyorsanız event.preventDefault(), düğme tıklandığında bağlantıyı takip etmediğinden emin olmak için tıklama çağrınızda bir açık arama yaptığınızdan emin olmak istersiniz . Bu seçeneğe zarif bozulma denir.

'#'kullanıcıyı sayfanın en üstüne geri götürür, bu yüzden genellikle birlikte gelirim void(0).

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

Ben dürüstçe ne de öneririm. Ben <button></button>bu davranış için stilize bir 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 onclicköğe etiketi üzerindeki özniteliği kullanarak değil, komut dosyası üzerinden bağlama öneririz . Tek gotcha, devre dışı bırakılamayan eski IE'lerde psuedo 3d metin efekti.

Eğer sen MUTLAKA bir A elemanı kullanmak, kullanmak javascript:void(0);önce bahsedilen nedenlerle.

• Onclick etkinliğinizin başarısız olması durumunda her zaman araya girer.
• Hatalı yükleme çağrıları olmayacak veya karma değişikliğe dayalı diğer etkinlikleri tetiklemeyecek
• Hash etiketi, tıklama düşerse (onclick atar) beklenmedik davranışlara neden olabilir, uygun bir düşme davranışı olmadıkça ve gezinme geçmişini değiştirmek istemiyorsanız bunlardan kaçının.

NOT: yerine , tıklamanın gerçekte ne yapacağını gösteren fazladan bir gösterge 0olarak javascript:void('Delete record 123')kullanılabilecek bir dize kullanabilirsiniz.

Birincisi, ideal olarak kullanıcının JavaScript'i devre dışı bırakması durumunda takip edilecek gerçek bir bağlantı ile. JavaScript yürütülürse tıklama etkinliğinin tetiklenmesini önlemek için false değerini 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

Bana sorarsanız;

"Bağlantınızın" tek amacı JavaScript kodunu çalıştırmaksa bağlantı olarak nitelendirilmez; bunun yerine bir JavaScript işlevine bağlı bir metin parçası. Bir bağlantıyı taklit etmek için ona bağlı bir <span>etiket onclick handlerve bazı temel CSS kullanmanızı tavsiye ederim . Bağlantılar gezinme için yapılır ve JavaScript kodunuz gezinme için değilse bir <a>etiket olmamalıdır .

Misal:

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>

İdeal olarak bunu yaparsınız:

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

Daha da iyisi, HTML'de varsayılan işlem bağlantınız olur ve DOM oluşturulduktan sonra onclick olayını öğeye göze çarpmadan JavaScript aracılığıyla eklersiniz, böylece JavaScript yoksa / kullanılmıyorsa, kodunuzu bilmeden ve gerçek içeriğinizi potansiyel olarak şaşırtmaktan (veya en azından dikkatinizi dağıtmaktan) yararsız olay işleyicilere sahip olmak.

Kullanmak sadece #bazı komik hareketler yapar, bu yüzden #selfyazma çabalarından tasarruf etmek istiyorsanız kullanmanızı tavsiye ederim JavaScript bla, bla,.

Aşağıdakileri kullanıyorum

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

yerine

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

Başka bir yerde, hrefözellikte normal URL kullanmanız gerektiğini belirten , ardından onclick'te bazı JavaScript işlevlerini çağırmanız gerektiğini belirten önerileri kabul ediyorum . Kusur, return falseçağrıdan sonra otomatik olarak ekledikleri .

Bu yaklaşımdaki sorun, işlev çalışmazsa veya herhangi bir sorun olursa, bağın silinemez hale gelmesidir. Onclick etkinliği her zaman geri döner false, bu nedenle normal URL çağrılmaz.

Çok basit bir çözüm var. Düzgün çalışıyorsa işlevin geri gelmesine izin verin true. 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>

Ben, doSomething()işlevin sonucunu reddettiğimi unutmayın . trueÇalışırsa geri döner , bu yüzden reddedilir ( false) ve path/to/some/URLçağrı yapılmaz. İşlev dönecekse false(örneğin, tarayıcı işlev içinde kullanılan bir şeyi desteklemiyorsa veya başka bir şey yanlış giderse), reddedilir trueve path/to/some/URLçağrılır.

#daha iyidir javascript:anything, 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'in etkin olmaması durumunda ... ve özellikler ve bütçe ile olduğunda). Ayrıca, JavaScript niteliklerini ve protokolünü doğrudan HTML'de kullanmak kötü bir form olarak kabul edilir.

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

Elemanları dikkat çekmeden enjekte ederseniz, bir tür ilerici geliştirme daha da iyidir. ( Bu yoruma bakın .)

Bağlantıyı JavaScript kullanarak yazmadığınız sürece (tarayıcıda etkinleştirildiğini bilmeniz için), ideal olarak JavaScript devre dışı bırakılan kişiler için uygun bir bağlantı sağlamanız ve ardından bağlantınızdaki bağlantının varsayılan eylemini önlemeniz gerekir. olay işleyicisi. Bu şekilde JavaScript etkin olanlar işlevi çalıştıracak ve JavaScript devre dışı olanlar yalnızca bağlantıyı tıklayıp hiçbir şey olmamak yerine uygun bir sayfaya (veya aynı sayfa içindeki bir konuma) atlayacaktır.

Kesinlikle hash ( #) daha iyidir çünkü JavaScript'te bir pseudoscheme:

1. tarihi kirletir
2. motorun yeni bir kopyasını başlatır
3. global kapsamda çalışır ve etkinlik sistemine saygı göstermez.

Tabii ki varsayılan eylemi önleyen bir onclick işleyici ile "#" daha iyi. Ayrıca, JavaScript'i çalıştırmak için tek amacı olan bir bağlantı, kullanıcıyı bir şey ters gittiğinde sayfada mantıklı bir çapa (sadece # en üste gönderir) göndermediğiniz sürece gerçekten "bir bağlantı" değildir. Sadece stil sayfası ile bağlantının görünümünü ve hissini simüle edebilir ve href'i unutabilirsiniz.

Buna ek olarak, cowgod'un önerisiyle ilgili olarak, özellikle bu: ...href="javascript_required.html" onclick="...Bu iyi bir yaklaşımdır, ancak "JavaScript devre dışı" ve "onclick başarısız" senaryoları arasında ayrım yapmaz.

Genellikle giderim

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

Javascript'ten daha kısadır: void (0) ve aynısını yapar.

Kullanmak istiyorum:

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

Nedenleri:

1. Bu href, arama motorlarının ihtiyaç duyduğu basit hale getirir . Başka bir şey kullanırsanız (dize gibi), 404 not foundhataya neden olabilir .
2. Fare bağlantının üzerine geldiğinde, bunun bir komut dosyası olduğunu göstermez.
3. Kullanarak return false;sayfa en üste atlamaz veya backdüğmeyi kırmaz .

Kullanmayı seçiyorum javascript:void(0), çü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.

Dolayısıyla, bir <a />etiketle bazı JavaScript işlemleri yaparken ve href="#"aynı zamanda koyarsanız , etkinliğin sonuna (satır içi etkinlik bağlaması durumunda) aşağıdaki gibi false değerini ekleyebilirsiniz :

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

Veya href özelliğini aşağıdaki gibi JavaScript ile 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şarmak için yukarıdaki tüm yöntemler yanlıştır (yine de iyi çalışır) . Sayfada gezinmek için herhangi bir öğe oluşturulmamışsa ve onunla ilişkili bazı JavaScript öğeleri varsa, bu bir <a>etiket olmamalıdır .

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

Yani, kullanmanın bir yararı var<a href="#"> . İmleç işaretçisini varsayılan olarak bu öğede alırsınız a href="#". Bunun için, CSS'yi cursor:pointer;bu sorunu da çözecek şekilde kullanabileceğinizi düşünüyorum .

Ve sonunda, etkinliği JavaScript kodunun kendisinden bağlıyorsanız, etiket event.preventDefault()kullanıyorsanız bunu başarmak için yapabilirsiniz <a>, ancak bunun için bir <a>etiket kullanmıyorsanız , bir avantaj elde edersiniz. Bunu yapmak zorunda değilim.

Bu nedenle, bu tür şeyler için bir etiket kullanmamak daha iyidir.

Bağlantıları yalnızca JavaScript'i ç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ı dışında bir öğe kullanın:

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

Ve CSS ile şekillendirin:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

JQuery kullanmak daha iyi olur,

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

ve ikisini de atlayın href="#"vehref="javascript:void(0)" .

Bağlantı etiketi işaretlemesi aşağıdaki gibi olacaktır

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

Yeterince basit!

Kullanacağınız edersek angularjs , aşağıdaki kullanabilirsiniz:

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

Hangi hiçbir şey yapmaz.

Ek olarak

• (#) İle olduğu gibi sizi sayfanın en üstüne götürmez
  • Bu nedenle, açıkça falseJavaScript ile geri dönmenize gerek yoktur
• Kısa bir öz

Yoksa hiçbir hrefbelki bir tutturma etiketini kullanmak için hiçbir neden yoktur.

Hemen hemen her öğeye etkinlik (tıklama, fareyle üzerine gelme vb.) Ekleyebilirsiniz, neden yalnızca a spanveya a kullanmıyorsunuz div?

JavaScript devre dışı bırakılmış kullanıcılar için: bir yedek yoksa (örneğin, bir alternatif href), en azından bir öğe <a>veya <span>etiket ne olursa olsun bu öğeyi hiç görememeli ve etkileşime girmemelidir.

Genellikle, JavaScript devre dışı bırakılmış 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 batmayan JavaScript denir.

Örnek ... Diyelim ki aşağıdaki arama bağlantınız var:

<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ılan kullanıcılar yönlendirilirken search.php, JavaScript kullanan izleyicileriniz gelişmiş işlevlerinizi görüntüler.

Onları birlikte 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 bunu, kullanıcı boş bir bağlantıya tıkladığında sayfanın üste atlamasını önlemek için kullanıyorum. Nadiren onClick ve diğer onetkinlikleri doğrudan HTML'de kullanıyorum .

Benim önerim, bağlantı yerine öznitelikli <span>öğe kullanmaktır class. Örneğin:

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

Ardından, işlevi .linkgövdeye ve </body>etiketin hemen önüne veya harici bir JavaScript belgesine sarılmış bir komut dosyasıyla atayın .

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

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

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

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, span öğesini küçük bir CSS'ye sahip bir çapa gibi görünecek şekilde şekillendirebilirsiniz:

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

İşte bir jsFiddle yukarıda belirtilen yukarıdaki örneği.

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

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

Yanlış geri dönme ihtiyacı ortadan kalkar. Bu #seçeneği sevmiyorum çünkü belirtildiği gibi kullanıcıyı sayfanın en üstüne götürecektir. Kullanıcıları JavaScript etkin değilse göndermek için başka bir yere sahipseniz (çalıştığım yerde nadirdir, ancak çok iyi bir fikirdir), Steve'in önerilen yöntemi harika çalışır.

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

Son olarak, javascript:void(0)kimsenin bir yere gitmesini istemiyorsanız ve bir JavaScript işlevini çağırmak istemiyorsanız kullanabilirsiniz. Fareyle üzerine gelme etkinliğinin olmasını istediğiniz bir resminiz varsa harika çalışır, ancak kullanıcının tıklayacağı hiçbir şey yoktur.

Birkaç sahte bağım olduğunda, onlara 'bağlantısız' bir sınıf vermeyi tercih ederim.

Sonra jQuery, ben aşağıdaki kodu ekleyin:

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

Ve HTML için, bağlantı basitçe

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

Çapa için kullanılmadıkça Hash-Tags kullanmayı sevmiyorum ve sadece ikiden fazla sahte bağlantım olduğunda yukarıdakileri yapıyorum, aksi takdirde javascript: void (0) ile gidiyorum.

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

Tipik olarak, sadece bir bağlantı kullanmaktan kaçınmayı ve sadece bir açıklığa bir şey sarmayı ve bunu bir pop-up veya içerik ortaya çıkarma gibi bazı JavaScript kodlarını etkinleştirmenin bir yolu olarak kullanmayı seviyorum.

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

Ankraj etiketini kullanıyor olsanız bile, burada gerçekten bir ankrajınızın olmadığını öneren D4V360'a katılıyorum. Sahip olduğunuz tek şey, belgenin biraz farklı davranması gereken özel bir bölümüdür. Bir <span>etiket çok daha uygundur.

Google Chrome'da geliştirici araçlarıyla birlikte denedim ve id="#"0,32 saniye sürdü. İken javascript:void(0)yöntemi sadece 0.18 saniye sürdü. Google Chrome'da javascript:void(0)daha iyi ve daha hızlı çalışır.

Temelde bu pratik makaleden aşamalı geliştirme kullanarak yorum yapıyorum . Kısa cevap, hiçbir zaman kullanmamanız javascript:void(0);veya #kullanıcı arayüzünüz JavaScript'in etkin olduğunu önceden belirlemediyse, bu durumda kullanmanız gerekirjavascript:void(0); . Ayrıca, span'ı link olarak kullanmayın, çünkü bu başlangıç ​​olarak anlamsal olarak yanlıştır.

Uygulamanızda / Home / Action / Parameters gibi SEO dostu URL rotalarını kullanmak da iyi bir uygulamadır. Öncelikle JavaScript olmadan çalışan bir sayfaya bağlantınız varsa, daha sonra deneyimi artırabilirsiniz. Çalışan bir sayfaya gerçek bir bağlantı kullanın, ardından sunuyu geliştirmek için tek bir etkinlik ekleyin.

İşte bir örnek. Home / ChangePicture, kullanıcı arabirimi ve standart HTML gönderme düğmeleriyle tamamlanmış bir sayfadaki formun çalışan bir bağlantısıdır, ancak jQueryUI düğmeleriyle kalıcı bir iletişim kutusuna daha hoş bir şekilde enjekte edilmiş görünüyor. Her iki şekilde de, mobil ilk geliştirmeyi tatmin eden 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>