HTML etiketi <a> hem href hem de onclick çalışmasını eklemek istiyor

123

HTML etiketi hakkında soru sormak istiyorum

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

Bunu href ve onClick ile çalışan bir etiket nasıl yapabilirim ? (önce onClick sonra href çalıştırmayı tercih edin)

232

Küçük bir sözdizimi değişikliğiyle ihtiyacınız olan şeye zaten sahipsiniz:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

<a>Etiketin onclickve hrefözelliklerin varsayılan davranışı, öğesini yürütmek onclick, ardından geri dönmediği hrefsürece takip etmek , etkinliği iptal etmektir (veya olay engellenmemişse)onclickfalse

— Ian
kaynak

Bunu element.addEventListener işleviyle yapmanın da bir yolu var mı?

— TheEquah

4

href="#"Gerçek bir URL yerine oraya koyana kadar benim için çalışmıyor .

— yegor256

Laravel framework kullanıyorum, bu yüzden blade görünümüme bunu ekledim, Çalışmıyor, kimse bunu laravel ile denedi mi?

— Vajira Prabuddhaka

Href içinde mvc denetleyicisinde çağrılan herhangi bir eylem yöntemim varsa bu çözüm çalışmıyor. Biri lütfen yardım edebilir mi?

— DharaPPatel

10

JQuery kullanın . clickEtkinliği kaydetmeniz ve ardından web sitesine gitmeniz gerekir .

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

Snippet'i genişlet

— Sudipta Chatterjee
kaynak

12

herhangi bir javascript çerçevesi kullanmayacağım. ama cevabınız için teşekkür ederim

7

Yukarıdaki gerçek bir bağlantı değildir. Yeni bir sekmede açılamaz ve çok kötü bir uygulamadır. Bir şey yeni bir sekmede açılabiliyorsa (url'si olmayan) her zaman anlamlı bir hreföznitelik ekleyin .

— Nux

2

Bunu başarmak için aşağıdaki html'yi kullanın:

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

İşte çalışma örneği .

— Kamil Kiełczewski
kaynak

Bu benim için Chrome'da çalışıyor, ancak Safari işlevi çalıştırıyor gibi görünüyor ancak href'i açmıyor ... herhangi bir öneri?

— Ben

@Ben JS olmadan keman üzerinde test yaptım - sadece saf html: <a href="http://example.com" >Item</a>ve Chrome'da sayfanın bu bağlantıyı çalıştırmasına izin veren bir mesaj görüyorum (krom url çubuğunun sonunda uyarı). Konsolda safaride bir uyarı görüyorum: [engellendi] fiddle.jshell.net/_display adresindeki sayfanın example.com'daki güvensiz içeriği görüntülemesine izin verilmedi - bu nedenle bu muhtemelen bir güvenlik sorunudur (yalnızca keman için mi?)

— Kamil Kiełczewski

1

JQuery gerekmez.

Bazı insanlar kullanmanın onclickkötü bir uygulama olduğunu söylüyor ...

Bu örnek, saf tarayıcı javascript kullanır. Varsayılan olarak, tıklama işleyicinin gezinmeden önce değerlendireceği görünür, böylece gezinmeyi iptal edebilir ve isterseniz kendinizinkini yapabilirsiniz.

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

— TeamDman
kaynak

-1

Kullanım ng-clickyerine onclick. ve bu kadar basit:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>

— mak-273
kaynak

Sadece AngularJS

— Corrodian'da