'#' Bağlantısına yapılan bir tıklamanın sayfanın başına atlamasını nasıl önleyebilirim?

Şu anda <a>tıklama etkinlikleri vb. Gibi şeyleri başlatmak için jQuery ile etiketler kullanıyorum .

Örnek <a href="#" class="someclass">Text</a>

Ancak '#' ın sayfanın üst kısmına nasıl atladığından nefret ediyorum. Bunun yerine ne yapabilirim?

JQuery'de, click olayını işlediğinizde, bağlantının normal şekilde yanıt vermesini durdurmak için yanlış döndürhrefözelliği ziyaret edecek olan varsayılan eylemin gerçekleşmesini önleyin (PoweRoy'un yorumu ve Erik'in cevabı başına ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Yani bu eski ama ... birisinin bunu bir aramada bulması durumunda.

Bunun "#/"yerine kullanın "#"ve sayfa atlanmayacaktır.

hatta şöyle yazabilirsiniz:

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

Im emin değilim onun daha iyi bir yol ama bir yoludur :)

Çözüm # 1: (Düz)

<a href="#!" class="someclass">Text</a>

Çözüm # 2: (gerekli javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

Çözüm # 3: (gerekli jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Bundan event.preventDefault()kaçınmak için kullanabilirsiniz . Daha fazla bilgiyi buradan edinebilirsiniz: http://api.jquery.com/event.preventDefault/ .

Sadece kullanmak <input type="button" />yerine <a>dilerseniz bir bağlantı gibi görünmek için stil onu ve kullanıma CSS.

Düğmeler özellikle tıklama için yapılır ve herhangi bir href özelliğine ihtiyaç duymazlar.

En iyi yol, düğmeyi oluşturmak ve javascript aracılığıyla ihtiyacınız olan yere eklemek için onload eylemini kullanmaktır, bu nedenle javascript devre dışı bırakıldığında, hiç gösterilmez ve kullanıcıyı karıştırmazlar.

Kullandığınızda href="#", aracı JavaScript'i desteklemediğinde çalışmayan tonlarca farklı bağlantıyı görürsünüz.

Bir çapa kullanmak istiyorsanız, önerilen diğer cevaplar gibi http://api.jquery.com/event.preventDefault/ adresini kullanabilirsiniz .

Ayrıca yayılma alanı gibi başka bir öğeyi kullanabilir ve click olayını buna ekleyebilirsiniz.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Kimlik olarak izin verilmediğinden #0href olarak kullanabilirsiniz 0, sayfa atlanmaz.

<a href="#0" class="someclass">Text</a>

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

Sadece kullan

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

Öğenin anlamlı bir href değeri yoksa, o zaman gerçekten bir bağlantı değildir, neden bunun yerine başka bir öğe kullanmıyorsunuz?

Neothor'un önerdiği gibi, bir açıklık da en az uygundur ve doğru bir şekilde biçimlendirilirse, tıklanabilecek bir öğe olarak görülebilir. Kullanıcının faresi üzerinde hareket ederken öğeyi 'aydınlatır' yapmak için bir fareyle üzerine gelme olayı bile ekleyebilirsiniz.

Bununla birlikte, bunu söyledikten sonra, sitenizin tasarımını javascript olmadan çalışacak şekilde yeniden düşünmek isteyebilirsiniz, ancak kullanılabilir olduğunda javascript ile güçlendirilir.

Href = "#" ile bağlantılar neredeyse her zaman bir düğme öğesiyle değiştirilmelidir:

<button class="someclass">Text</button>

Href = "#" ile bağlantıların kullanılması da erişilebilirlikle ilgili bir sorundur, çünkü bu bağlantılar ekran okuyucuları tarafından görülebilir ve "Bağlantı - Metin" okunur, ancak kullanıcı tıklarsa hiçbir yere gitmez.

Bir href özelliği olmadan bir bağlantı etiketi geçirebilir ve gerekli eylemi yapmak için jQuery kullanabilirsiniz:

<a class="foo">bar</a>

Ben kullandım:

<a href="javascript://nop/" class="someClass">Text</a>

#/Hile çalışır, ancak tarayıcıya bir tarih olayı ekler. Bu nedenle, geri tıklamak kullanıcının istediği / beklediği gibi çalışmaz.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); zaten var olan içerik ve çalıştıktan sonra DOM'a eklenen tüm öğeler için çalıştığım şekilde gittim.

Özellikle, bir .btn-group(Referans) içindeki bir bootstrap açılır menüsünde bunu yapmak gerekiyordu , bu yüzden yaptım:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

Bu şekilde hedeflendi ve sayfadaki başka hiçbir şeyi etkilemedi.

Her zaman kullandım:

<a href="#?">Some text</a>

sayfa atlamasını önlemeye çalışırken. Bunun en iyisi olup olmadığından emin değilim, ancak yıllardır iyi çalışıyor gibi görünüyor.

Sayfanın herhangi bir JavaScript olmadan en üste atlamasını önlemek için 4 benzer yol vardır:

Seçenek 1:

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

Seçenek 2:

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

Seçenek 3:

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

Seçenek 4 ( Önerilmez ):

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

Ancak event.preventDefault(), jQuery'de click olayını veriyorsanız kullanmak daha iyidir .

Ayrıca jquery işleme sonra false dönebilirsiniz.

Örneğin.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Böyle bir şey kullanıyorum:

<a href="#null" class="someclass">Text</a>

Sayfanın atlamasını önlemek için, e.stopPropagation();aradıktan sonra aramanız gerekir e.preventDefault();:

stopPropagationetkinliğin DOM ağacına çıkmasını önler. Daha fazla bilgi için: https://api.jquery.com/event.stoppropagation/

Sayfa atlamadan aynı sayfada bir Bağlantı Bölümü'ne geçmek istiyorsanız şunu kullanın:

"#" Yerine "# /" kullanın, ör.

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Sonra bir şey eklemek #, sayfanın odağını o kimliğe sahip öğeye ayarlar. En basit çözüm, #/jQuery kullanıyor olsanız bile kullanmaktır. Ancak olayı jQuery'de yürütüyorsanız, event.preventDefault()işte böyle bir yol var.

<a href="#!">Link</a>Ve <a href="#/">Link</a>does not iş bir kereden fazla aynı girişe tıklayın varsa .. sadece çoklu girişler üzerinde her biri için 1 olay tıklama alır.

hala en iyi yol <a href="#">Link</a>

sonra,

event.preventDefault();