JavaScript'i tetikleyen bir bağlantı tıklandığında bir web sayfasının yukarı kaymasını nasıl engelleyebilirim?

Bir jQuery veya JavaScript olayı ile kablolu bir bağlantı olduğunda:

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

Sayfanın yukarı kaymasını nasıl önleyebilirim? Bağlantıdan href özniteliğini kaldırdığımda sayfa en üste kaydırmıyor, ancak bağlantı tıklanabilir görünmüyor.

Click olayı için varsayılan eylemin (yani bağlantı hedefine gitme) gerçekleşmesini önlemeniz gerekir.

Bunu yapmanın iki yolu vardır.

Seçenek 1: event.preventDefault()

.preventDefault()İşleyicinize iletilen olay nesnesinin yöntemini çağırın . İşleyicilerinizi bağlamak için jQuery kullanıyorsanız, bu olayın örneği jQuery.Eventve jQuery sürümü olacaktır .preventDefault(). addEventListenerİşleyicilerinizi bağlamak için kullanıyorsanız , bunun bir Eventve ham DOM sürümü olacaktır .preventDefault(). Her iki şekilde de ihtiyacınız olanı yaparsınız.

Örnekler:

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

Seçenek 2: return false;

JQuery'de :

Bir olay işleyicisinden false döndürülmesi otomatik olarak event.stopPropagation () ve event.preventDefault () yöntemini çağırır

Yani, jQuery ile, alternatif olarak varsayılan bağlantı davranışını önlemek için bu yaklaşımı kullanabilirsiniz:

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

Ham DOM olayları kullanıyorsanız, HTML 5 spesifikasyonu bu davranışı belirlediğinden, bu modern tarayıcılarda da çalışır. Ancak, spesifikasyonun eski sürümleri olmadı, bu nedenle eski tarayıcılarla maksimum uyumluluğa ihtiyacınız varsa, .preventDefault()açıkça aramalısınız . Spesifikasyon ayrıntıları için event.preventDefault () ve return false (jQuery yok) konusuna bakın .

Bu hizmeti kullanmak için href ayarlayabilirsiniz #!yerine#

Örneğin,

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

tıklandığında herhangi bir kaydırma yapmaz.

Dikkat! Bu, tıklandığında tarayıcının geçmişine yine de bir giriş ekleyecektir, yani bağlantınızı tıkladıktan sonra kullanıcının geri düğmesi onları daha önce bulundukları sayfaya götürmeyecektir. Bu nedenle, .preventDefault()yaklaşımı kullanmak veya her ikisini birlikte kullanmak daha iyidir .

İşte bunu gösteren bir Fiddle (kaydırma çubuğunuzu alana kadar tarayıcınızı aşağı doğru kaydırın):
http://jsfiddle.net/9dEG7/

Spec nerds için - neden işe yarıyor:

Bu davranış, Parça tanıtıcısına gitme bölümünün altındaki HTML5 spesifikasyonunda belirtilir . Bir href içeren bağlantının "#"belgenin en üste kaymasına neden olmasının nedeni, bu davranışın açıkça boş bir parça tanımlayıcısını işleme yolu olarak belirtilmesidir:

2. fragidBoş dize ise, belgenin belirtilen kısmı belgenin üst kısmıdır

"#!"Bunun yerine bir href kullanmak sadece bu kuralı önlediği için çalışır. Ünlem işareti hakkında sihir yoktur - sadece uygun bir parça tanımlayıcısı yapar çünkü tipik bir parçadan fark edilir şekilde farklıdır ve sayfanızdaki bir öğenin idveya nameöğesiyle eşleşmesi pek olası değildir . Gerçekten de, karmadan sonra neredeyse her şeyi koyabiliriz; yeterli olmayacak tek parçacıklar boş dize, 'üst' kelimesi veya sayfadaki öğelerin özellikleriyle nameveya idnitelikleriyle eşleşen dizelerdir .

Daha doğrusu, belgenin belirtilen kısmını fragitten belirlemek için aşağıdaki algoritmada 8. adıma geçmemize neden olacak bir parça tanımlayıcısına ihtiyacımız var :

1. URL ayrıştırıcı algoritmasını URL'ye uygulayın ve fragid'in sonuçta çözümlenen URL'nin parça bileşeni olmasını sağlayın .

2. Eğer fragidboş bir dize olduğunda, o zaman belgenin belirtilen bölümü belgenin üst olduğu; algoritmayı burada durdurun.

3. Izin vermek fragid bytesyüzde çözme sonucu olsun fragid.

4. Izin vermek decoded fragidUTF-8 kod çözücü algoritması uygulanmasının sonucu olabilir fragid bytes. UTF-8 kod çözücü bir kod çözücü hatası verirse, kod çözücüyü iptal edin ve bunun yerine etiketli adıma geçin no decoded fragid.

5. DOM'de tam olarak eşit bir kimliğe sahip bir decoded fragidöğe varsa, ağaç düzenindeki bu tür ilk öğe belgenin belirtilen parçasıdır; algoritmayı burada durdurun.

6. Kod çözülmüş fragid yok : DOM'da , değeri tam olarak eşit fragid( değildecoded fragid ) olan bir ad niteliğine sahip bir öğe varsa, ağaç düzenindeki bu tür ilk öğe belgenin belirtilen parçasıdır; algoritmayı burada durdurun.

7. Eğer fragid dize için ASCII büyük / küçük harfe duyarlı olmayan bir eşleşme topise, belgenin belirtilen kısmı belgenin üst kısmıdır; algoritmayı burada durdurun.

8. Aksi takdirde, belgenin belirtilen bir parçası yoktur.

8. adıma bastığımız ve belgenin belirtilen bir parçası olmadığı sürece , aşağıdaki kural yürürlüğe girer:

Belirtilen bir parça yoksa ... kullanıcı aracısı hiçbir şey yapmamalıdır.

bu yüzden tarayıcı kaymaz.

Kolay bir yaklaşım, bu koddan yararlanmaktır:

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

Bu yaklaşım sayfanın yenilenmesini zorlamaz, bu nedenle kaydırma çubuğu yerinde kalır. Ayrıca, programlı olarak onclick olayını değiştirmenizi ve jQuery kullanarak istemci tarafı olay bağlamasını işlemenizi sağlar.

Bu nedenlerden dolayı, yukarıdaki çözüm aşağıdakilerden daha iyidir:

<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

Burada son çözüm, yalnızca myClickHandler yöntemi başarısız olursa kaydırma atlama sorununu önler.

Aradığınız koddan false döndürmek işe yarayacaktır ve bazı durumlarda tercih edilen yöntemdir, ancak bu

<a href="javascript:;">Link Title</a>

SEO söz konusu olduğunda gerçekten bağlantınızın ne için kullanılacağına bağlıdır. Aslında başka bir içeriğe bağlanmak için kullanacaksanız, ideal olarak burada anlamlı bir şey isteyeceğinizi kabul edersiniz, ancak bağlantıyı işlevsellik amaçlı olarak kullanıyorsanız, yığın taşması sonrası araç çubuğu (kalın, italik, köprü gibi) , vb.) muhtemelen önemli değil.

Değiştirmelisin

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

için

<a href="javascript:;">My Link</a>

Bu şekilde, bağlantı tıklandığında sayfa yukarı kaydırılmaz. Bu, href = "#" kullanmaktan ve daha sonra varsayılan olayın çalışmasını önlemekten daha temizdir.

Ben ilk cevap bu iyi nedenleri var bu soruya gibi return false;adlandırılan işlev bir hata atarsa çalıştırmaz veya ekleyebilirsiniz return false;a doSomething()fonksiyonu ve daha sonra kullanılmak üzere unutmakreturn doSomething();

Bunu dene:

<a href="#" onclick="return false;">My Link</a>

hrefDeğeri basitçe değiştirebiliyorsanız şunu kullanmalısınız:

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

Yeni geldiğim bir başka temiz çözüm, tıklama eyleminin ortaya çıkmasını ve sayfanın kaymasına neden olmak için jQuery kullanmaktır, ancak yalnızca href="#"bağlantılar için.

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

İlk etapta sayfanın üst kısmından daha duyarlı bir şeye bağlantı verin. Ardından varsayılan etkinliği iptal edin.

Pragmatik ilerici geliştirmenin 2. kuralına bakınız .

Ayrıca onclick özniteliğinin içinde event.preventDefault öğesini kullanabilirsiniz .

<a href="#" onclick="event.preventDefault(); doSmth();">doSmth</a>

Ekstra tıklama etkinliği yazmaya gerek yok.

Ayrıca şöyle de yazabilirsiniz: -

<a href="#!" onclick="function()">Delete User</a>

İşlevi çağırırken, return false örneği izleyin :

<input  type="submit" value="Add" onclick="addNewPayment();return false;">

Biri üstte, diğeri altta olmak üzere iki bağlantı içeren bir sayfa oluşturun. Üst bağlantıya tıklandığında, sayfanın alt bağlantının mevcut olduğu sayfanın altına kaydırması gerekir. Alt bağlantıya tıklandığında, sayfanın üst kısmına kadar yukarı kaydırması gerekir.

<a onclick="yourfunction()">

bu iyi çalışır. href = "#" eklemeye gerek yok

CSS'nizi kontrol etmek isteyebilirsiniz. Buradaki örnekte: https://css-tricks.com/the-checkbox-hack/ var position: absolute; top: -9999px;. Bu, özellikle onclick="whatever"tıklanan öğenin mutlak konumuna atladığı için Chrome'da aptalca .

Çıkarma position: absolute; top: -9999px;için, display: none;kudreti yardımı.

Daraltma için Bootstrap 3 için, bağlantıda veri hedefi belirtmezseniz ve hedefi belirlemek için href'ye güvenirseniz, olay engellenir. Veri hedefini kullanıyorsanız etkinliği kendiniz engellemeniz gerekir.

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>

<div id="demo" class="collapse"> 
<p>Lorem ipsum dolor sit amet</p>
</div>