La etiqueta HTML <a> desea agregar href y onclick working

123

Me gustaría preguntar sobre la etiqueta HTML

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

¿Cómo hacer que esta sea una etiqueta que funcione con href y onClick ? (prefiera onClick corriendo primero y luego href)

232

Ya tiene lo que necesita, con un pequeño cambio de sintaxis:

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

El comportamiento predeterminado de las <a>etiquetas onclicky hrefpropiedades es ejecutar el onclick, luego seguir el hrefmientras onclickno regrese false, cancelando el evento (o el evento no se ha evitado)

— Ian
fuente

¿Existe también una manera de hacer esto con una función element.addEventListener?

— TheEquah

44

No funciona para mí, hasta que coloque href="#"allí en lugar de una URL real.

— yegor256

Estoy usando laravel framework, por lo que en mi vista de blade incluí esto, no funciona, ¿alguien ha intentado esto con laravel?

— Vajira Prabuddhaka

Esta solución no funciona si tengo algún método de acción llamado en el controlador mvc en href. ¿Alguien puede ayudarme?

— DharaPPatel

10

Usa jQuery . Debe capturar el clickevento y luego ir al sitio 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>

Expandir fragmento

— Sudipta Chatterjee
fuente

11

No usaré ningún framework javascript. pero gracias por tu respuesta

77

Arriba no hay un enlace real. No se puede abrir en una pestaña nueva y es una muy mala práctica. Si se puede abrir algo en una nueva pestaña (tiene una url), siempre agregue un hrefatributo significativo .

— Nux

2

Para lograr esto, use el siguiente 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>

Aquí está el ejemplo de trabajo .

— Kamil Kiełczewski
fuente

Esto funciona para mí en Chrome, sin embargo, Safari parece ejecutar la función pero no abre el href ... ¿alguna sugerencia?

— Ben

@Ben hice una prueba en el violín sin JS, solo html puro: <a href="http://example.com" >Item</a>y en Chrome veo un mensaje para permitir que la página ejecute este enlace (alerta al final de la barra de URL de Chrome). En el safari en la consola, veo una advertencia: [bloqueado] La página en fiddle.jshell.net/_display no tenía permitido mostrar contenido inseguro de example.com , por lo que probablemente sea un problema de seguridad (¿solo en el violín?)

— Kamil Kiełczewski

1

No se necesita jQuery.

Algunas personas dicen que usar onclickes una mala práctica ...

Este ejemplo utiliza JavaScript puro del navegador. De forma predeterminada, parece que el controlador de clics evaluará antes de la navegación, por lo que puede cancelar la navegación y hacer la suya propia si lo desea.

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

-1

Uso ng-clicken lugar de onclick. y es tan simple como eso:

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

Solo en AngularJS

— Corrodian