¿Cómo puedo eliminar condicionalmente el comportamiento predeterminado de una etiqueta de ancla (a) añadida con insertAdjacentHTML?

Cómo eliminar condicionalmente el comportamiento predeterminado de un enlace (a) agregado por insertAdjacentHTML

Si te encuentras en la necesidad de agregar un enlace que redirija a los usuarios a otra página solo si se cumple una condición específica, has llegado al lugar correcto. En este artículo, te mostraremos cómo hacerlo con un enfoque claro y conciso, utilizando JavaScript.

Problema a resolver

La situación es la siguiente: necesitas insertar un enlace (<a>) en tu documento HTML que debería redirigir a los usuarios solo si la longitud de un array es menor a 3. Has comenzado a utilizar insertAdjacentHTML, pero te resulta complicado prevenir el comportamiento predeterminado del enlace.

Solución paso a paso

A continuación, te presentamos un enfoque que te ayudará a lograr tu objetivo:

1. Crear el enlace con la función insertAdjacentHTML:
   Se debe crear un enlace en el HTML utilizando insertAdjacentHTML y establecer un evento onclick que maneje la lógica de redirección.

2. Agregar el evento de clic:
   En lugar de depender del atributo onclick en el enlace, utiliza un addEventListener para gestionar el clic. Esto te permitirá controlar la redirección según la longitud del array.

Aquí tienes un ejemplo de código para implementar esta solución:

let array = ['1', '2', '3'];  // Array que estamos controlando

// Función para agregar el elemento
function addElements(elem) {
    let elem1 = document.querySelector('.elem1');
    elem1.insertAdjacentHTML('beforeend', `<a class="atag" href="#">Cliquez pour comparer</a>`);

    // Se agrega el evento de clic al enlace recién creado
    let atag = document.querySelector('.atag');
    atag.addEventListener('click', (event) => {
        // Previene el comportamiento predeterminado
        event.preventDefault();

        // Evaluamos la longitud del array
        if (elem.length < 3) {
            location.href = "https://www.example.com";  // Redirigir si la condición se cumple
        } else {
            alert('Un maximum de 3 produits à comparer est possible!');  // Mensaje de alerta si no se cumple
        }
    });
}

// Llamada a la función para agregar el enlace
addElements(array);

Explicación del código

• Insertar el enlace: La función addElements agrega un enlace <a> al DOM dentro de un contenedor específico.
• Manejador de clics: Al agregar el escuchador de eventos al enlace, se previene la acción predeterminada (redirigir inmediatamente) usando event.preventDefault(). Esto permite evaluar primero la longitud del array.
• Condicional de redirección: Si la longitud del array es menor a 3, el usuario será redirigido. Si no, se mostrará un mensaje de alerta.

Conclusión

Con esta solución, has logrado agregar un enlace interactivo que solo redirige al usuario cuando se cumple una condición específica. La clave fue gestionar correctamente el evento de clic y evitar el comportamiento predeterminado del enlace. Implementa este enfoque y mejora la experiencia del usuario en tu aplicación web.