Il tag HTML <a> desidera aggiungere sia href che onclick

123

Vorrei chiedere informazioni sui tag HTML

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

Come rendere questo un tag di lavoro con href e onClick ? (preferisci onClick in esecuzione prima poi href)

232

Hai già quello che ti serve, con una piccola modifica alla sintassi:

<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>

Il comportamento predefinito dei <a>tag onclicke delle hrefproprietà è eseguire il onclick, quindi seguire il hreffinché onclicknon ritorna false, annullando l'evento (o l'evento non è stato impedito)

— Ian
fonte

C'è anche un modo per farlo con una funzione element.addEventListener?

— TheEquah

4

Non funziona per me, fino a quando non metto href="#"lì invece di un vero URL.

— yegor256

Sto usando il framework laravel, quindi nella mia vista blade ho incluso questo, non funziona, qualcuno l'ha provato con laravel?

— Vajira Prabuddhaka

Questa soluzione non funziona se ho un metodo di azione chiamato nel controller mvc in href. Qualcuno può aiutare per favore?

— DharaPPatel

10

Usa jQuery . Devi catturare l' clickevento e poi andare sul sito web.

$("#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>

Espandi lo snippet

— Sudipta Chatterjee
fonte

11

non userò alcun framework javascript. ma grazie per la tua risposta

7

Sopra non è un collegamento effettivo. Non può essere aperto in una nuova scheda ed è una pessima pratica. Se qualcosa può essere aperto in una nuova scheda (ha un URL) aggiungi sempre un hrefattributo significativo .

— Nux

2

Per ottenere questo, utilizzare il seguente html:

<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>

Ecco un esempio funzionante .

— Kamil Kiełczewski
fonte

Questo funziona per me in Chrome, tuttavia Safari sembra eseguire la funzione ma non aprire l'href ... qualche suggerimento?

— Ben

@ Ben ho fatto il test su fiddle senza JS - solo html puro: <a href="http://example.com" >Item</a>e in Chrome vedo un messaggio per consentire alla pagina di eseguire questo collegamento (avviso alla fine della barra degli URL di Chrome). In Safari in console vedo un avviso: [bloccato] La pagina su fiddle.jshell.net/_display non poteva mostrare contenuti non sicuri da example.com - quindi probabilmente questo è un problema di sicurezza (solo su violino?)

— Kamil Kiełczewski

1

Non è necessario jQuery.

Alcune persone dicono che l'uso onclickè una cattiva pratica ...

Questo esempio utilizza javascript puro del browser. Per impostazione predefinita, sembra che il gestore dei clic valuterà prima della navigazione, quindi puoi annullare la navigazione e fare la tua se lo desideri.

<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
fonte

-1

Utilizzare ng-clickal posto di onclick. ed è così semplice:

<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
fonte

Solo in AngularJS

— Corrodian il