Etiketin onclick özniteliğinden kaynaklanan özel işlevden önleme varsayılanını çağırmak için etkinliğe erişin


119

Bunun gibi bağlantılarım var:

<a href="#" onclick="myfunc({a:1, b:'hi'})" />click</a>
<a href="#" onclick="myfunc({a:3, b:'jo'})" />click</a>

Ve bir preventDefault()içeride yapmak istiyorum myfunc(), çünkü #bağlantıya tıklandığında adres çubuğuna bir eklenecek ( return false;veya yapmadan href='javascript:void(0);')

Mümkün mü? Etkinliği içeri alabilir miyimmyfunc()


6
Yanlış dönüşün nesi yanlış?
Alex

5
yayılmayı da durdurur
Omu

4
return falseyalnızca jQuery içinde yayılmayı durdurur.
cruzanmo

Yanıtlar:


157

W3C uyumlu tarayıcılarda ortaya çıkan olayın nesnesi eventolacak olan işleve satır içi olarak girebileceğinize inanıyorum event(yani, IE'nin eski sürümleri, bakmak için olay işleyici işlevinizin içinde hala algılamayı gerektirecektir window.event).

Hızlı bir örnek .

function sayHi(e) {
   e.preventDefault();
   alert("hi");
}
<a href="http://google.co.uk" onclick="sayHi(event);">Click to say Hi</a>

  1. Olduğu gibi çalıştırın ve bağlantının uyarıdan sonra Google'a yönlendirilmediğine dikkat edin.
  2. Ardından, işleyiciye eventiletileni onclickbaşka bir şeye değiştirin, eçalıştır'a tıklayın, ardından yeniden yönlendirmenin uyarıdan sonra gerçekleştiğine dikkat edin (sonuç bölmesi beyaz olur ve yeniden yönlendirmeyi gösterir).

5
tamam, görüyorum ki tek yapmam gereken parametremizi ikinci myfunc(event, {a:123, b:"asdas"})
sıraya

1
@Omu İletilen bağımsız değişken, olay, işlev için tanımlanmış parametre listesinin doğru yerinde olduğu sürece herhangi bir yerde olabilir, ilki olmak zorunda değildir. Örneğin function myfunc(o, e) {...}, o zaman olarak çağrılabilir myfunc({a:1, b:'hi'}, event).
cateyes

2
Olay nesnesini açıkça geçirip yakalamanıza gerek olmadığını düşünüyorum. Fonksiyonda basitçe buna başvurabilirsiniz. Lütfen birisi onaylayabilir mi? Demek istediğim, olay içermeyen bu kod da çalışmalıdır:function sayHi() { event.preventDefault(); alert("hi"); }
K Vij

111

En basit çözüm basitçe şudur:

<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

Aslında, JS etkin olmayan tarayıcılar için yedek içeren belgeler için önbellek bozmanın iyi bir yoludur (JS yoksa önbellek bozma olmaz)

<a onclick="
if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
window.location = 'http://www.domain.com/docs/thingy.pdf?cachebuster=' + 
Math.round(new Date().getTime() / 1000);" 
href="http://www.domain.com/docs/thingy.pdf">

JavaScript etkinleştirilirse, PDF'yi önbellek bozan bir sorgu dizesiyle açar, değilse yalnızca PDF'yi açar.


Önbellek bozma peşinde olduğunuz tek şeyse, bu bağlantıyı yeniden yazmak için sunucu tarafı teknolojisini kullanabilirsiniz.
mpen

Daha iyi olurdu, ancak sunucu tarafı koduna erişimim yok. Sahip olduğum şeyle çalışmak.
JuLo

11

Bunu dene:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>

bu, her tıklama etkinliği için bir <script> etiketi gerektirir ve kodu daha karmaşık hale getirir.
somid3

Aynı zamanda jQuery de gerektirir, bu da mevcut olsa bile bir önkoşul olmamalıdır.
Irregular Shed

Burada da aynı fikirde değilim, Satır içi bir işleve basit bir çözümleme daha etkilidir ve daha az koddur.
Shannon Hochkins

1
jQuery değilken @ somid3, gerekli performanstan endişe ediyorsanız, size sadece böyle Sayfadaki tüm çapa için tek dinleyici takılarak ediyoruz böylece tek devredilmiş olay işleyicisi kullanabilirsiniz: $("body").on("click","a",function(e) { e.preventDefault() });. Her iki durumda da, hiçbir çözüm performansı anlamlı bir şekilde etkilemeyecektir.
KyleMit

7
<script type="text/javascript">
$('a').click(function(){
   return false;
});
<script>

2
Bu, her bağlantı için geçerlidir ve tüm bağlantıları kesecektir, ayrıca jQuery'nin yanı sıra sayfaya javascript'in de eklenmesini gerektirir.
Shannon Hochkins

Ayrıca, jQuery kullanılırken, return falseo öğedeki diğer tüm olay işleyicilerin çalışmasını engelleyeceği ve olayın daha yüksek öğelere köpürmesini durduracağı için önerilmez.
Stijn de Witt

6

Bağlantılara benzersiz bir sınıf ve bu sınıftaki bağlantılarda varsayılanı engelleyen bir javascript ekleyin:

<a href="#" class="prevent-default" 
   onclick="$('.comment .hidden').toggle();">Show comments</a>

<script>
  $(document).ready(function(){

    $("a.prevent-default").click(function(event) {
         event.preventDefault(); 
          });
  });
</script>

Küresel bir çözüm için ilginç bir yaklaşım.
AFract

5

A etiketinden href niteliğini kaldıramaz mısınız?


1
evet, bu da bir seçenek, ancak varsayılan olarak bağlantının altı çizili olmayacak ve eğer javascript kapalıysa, href gitmeyecek
Omu

4

Sanırım onClick kullandığımızda varsayılandan farklı bir şey yapmak istiyoruz. Yani, onClick ile olan tüm bağlantılarınız için:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});


2

Etkinliğe onclick'ten şu şekilde erişebilirsiniz:

<button onclick="yourFunc(event);">go</button>

ve javascript işlevinizde tavsiyem şu ilk satır ifadesini eklemektir:

function yourFunc(e) {
    e = e ? e : event;
}

sonra her yerde e'yi olay değişkeni olarak kullanın



0

Herhangi bir JS kitaplığı veya jQuery olmadan. Mümkünse güzel bir açılır pencere açmak için. Normal bağlantı açmada güvenli bir şekilde başarısız olur.

<a href="https://acme.com/" onclick="onclick="openNewWindow(event, this.href);">...</a>

Ve yardımcı fonksiyon:

function openNewWindow(event, location) {
  if (event.preventDefault && event.stopImmediatePropagation) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
  } else {
    event.returnValue = false; 
  }
  window.open(location, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=450');
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.