Onclick çalıştırılırsa HREF'i nasıl devre dışı bırakabilirim?

Hem HREF ve hem deONCLICK nitelikleri ayarlanmış bir çapa var . Tıklanırsa ve Javascript etkinleştirilirse, yalnızca yürütmesini ONCLICKve yok saymasını istiyorum HREF. Benzer şekilde, Javascript devre dışı bırakılırsa veya desteklenmiyorsa, HREFURL'yi takip etmesini ve yok saymasını istiyorum ONCLICK. Aşağıda, JS'yi çalıştıracak ve bağlantıyı eşzamanlı olarak izleyecek olan (genellikle JS çalıştırılır ve ardından sayfa değişir) yaptığım bir örnek bulunmaktadır:

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

bunu yapmanın en iyi yolu nedir?

Bir Javascript cevabı umuyorum, ancak çalıştığı sürece herhangi bir yöntemi kabul edeceğim, özellikle de bu PHP ile yapılabiliyorsa. " Javascript onclick işlevi bitmeden önce bir href bağlantısı çalıştırıyor ve sayfayı yeniden yönlendiriyor " ifadesini okudum , ancak yalnızca geciktiriyor HREF, ancak tamamen devre dışı bırakmıyor. Ayrıca çok daha basit bir şey arıyorum.

onclickÖznitelikte önce return koyarsanız, ilk düzenlenmemiş çözümü kullanabilirsiniz :

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

Örnek: https://jsfiddle.net/FXkgV/289/

    yes_js_login = function() {
         // Your code here
         return false;
    }

Yanlış döndürürseniz, varsayılan eylemi engellemelidir (href'e gitme).

Düzenleme: Maalesef işe yaramıyor, bunun yerine aşağıdakileri yapabilirsiniz:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>

Basitçe devre dışı varsayılan tarayıcı davranışı kullanarak preventDefaultve geçiş eventHTML'nizdeki.

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}

<a href="http://www.google.com" class="ignore-click">Test</a>

jQuery ile:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

JavaScript ile

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

Sınıfı .ignore-clickistediğiniz kadar öğeye atarsınız ve bu öğelere yapılan tıklamalar göz ardı edilir

Bu basit kodu kullanabilirsiniz:

<a href="" onclick="return false;">add new action</a><br>

Aşağıdaki gibi bir etkinlik parametresi iletirseniz daha basittir:

<a href="#" onclick="yes_js_login(event);">link</a>

function yes_js_login(e) {
    e.stopImmediatePropagation();
}

Bu yardımcı olabilir. JQuery gerekmez

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

Bu kod şunları yapar: İlgili bağlantıyı Google Doküman Görüntüleyici'ye iletin

1. Çapanın tam bağlantı sürümünü şu şekilde edinin: this.href
2. bağlantıyı yeni pencerede açın.

Yani sizin durumunuzda bu işe yarayabilir:

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">

Alternatif olarak normal bir URL'yi veya javascript çağrısını işleyen öğe için bir şablona ihtiyacım olduğu ve js işlevinin çağıran öğeye bir başvuruya ihtiyaç duyduğu bir durumu çözdüm. Javascript'te "bu" yalnızca bir form öğesi, örneğin bir düğme bağlamında öz referans olarak çalışır. Bir düğme istemedim, sadece normal bir bağlantının görünümünü.

Örnekler:

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

Href ve onClick öznitelikleri aynı değerlere sahip, ancak bir javascript çağrısı olduğunda onClick'e "yanlış döndür" ekledim. Çağrılan işlevde "yanlış döndür" olması işe yaramadı.

Bu benim için çalıştı:

<a href="" onclick="return false;">Action</a>

Benim durumumda, kullanıcı "a" öğesini tıkladığında bir koşulum vardı. Koşul şuydu:

Diğer bölümde ondan fazla öğe varsa, kullanıcı başka bir sayfaya yönlendirilmemelidir.

Diğer bölümde ondan az öğe varsa, kullanıcı başka bir sayfaya yönlendirilmelidir.

"A" elemanlarının işlevselliği diğer bileşene bağlıdır. Tıklama olayındaki kod şu şekildedir:

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}

Aşağıdaki gibi kullanmayı javascript:void(0)deneyin-

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