javascript - eventos - ¿Cómo evito que el evento onclick de un padre se active cuando se hace clic en un ancla hijo?

onclick html5

Question

Actualmente estoy usando jQuery para hacer un div pulsable y en este div también tengo anclas. El problema con el que me estoy topando es que cuando hago clic en un ancla se activan ambos eventos de clic (para el div y el ancla) ¿Cómo evito que el evento onclick del div se dispare cuando se hace clic en un ancla?

Aquí está el código roto:

JavaScript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don''t want #clickable to handle this click event.</a>
</div>

Answer 1

Aquí hay un ejemplo usando Angular 2+

Por ejemplo, si desea cerrar un componente modal si el usuario hace clic fuera de él:

// Close the modal if the document is clicked.

@HostListener(''document:click'', [''$event''])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don''t close the modal if the modal itself is clicked.

@HostListener(''click'', [''$event''])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

Answer 2

Aquí mi solución para todos los que buscan un código que no sea jQuery (javascript puro)

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

Su código no se ejecutará si se hace clic en los hijos de los padres

Answer 3

Debe detener el evento para que no llegue (burbujee) al padre (el div). Vea la parte sobre el burbujeo here , y la información de la API específica de jQuery here .

Answer 4

En caso de que alguien haya tenido este problema usando React, así es como lo resolví.

scss:

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

Procesamiento del componente ():

render() {
    ...
    return (
        <div id=''loginBackdrop'' onClick={this.props.closeLogin}>
            <div id=''loginFrame'' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

Al agregar una función onClick para los eventos de clic del ratón modales (div del contenido), se evita que los eventos lleguen a la función ''closeLogin'' del elemento principal.

Esto me sirvió de ayuda y pude crear un efecto modal con 2 divs simples.

Answer 5

Escribir si alguien necesita (funcionó para mí):

event.stopImmediatePropagation()

De this solución.

Answer 6

Los eventos se propagan al punto más alto del DOM en el que se ha adjuntado un evento de clic. Por lo tanto, en su ejemplo, incluso si no tuviera ningún otro elemento que se pueda hacer clic explícitamente en el div, cada elemento secundario del div dividirá su evento de clic hasta el DOM hasta que el controlador de eventos de clic del DIV lo atrape.

Hay dos soluciones para esto es verificar quién originó realmente el evento. jQuery pasa un objeto eventargs junto con el evento:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

También puede adjuntar un controlador de eventos de clic a sus enlaces que les diga que dejen de generar eventos después de que se ejecute su propio controlador:

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

Answer 7

Para especificar algún subelemento como no pulsable, escriba la jerarquía css como se muestra en el siguiente ejemplo.

En este ejemplo, detengo la propagación a cualquier elemento (*) dentro de td dentro de tr dentro de una tabla con la clase ".subtable"

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

Answer 8

Si no tiene la intención de interactuar con los elementos internos en cualquier caso, entonces una solución CSS podría ser útil para usted.

Solo establece el / los elemento / s interno / a en pointer-events: none

en tu caso:

.clickable > a {
    pointer-events: none;
}

o para apuntar a todos los elementos internos en general:

.clickable * {
    pointer-events: none;
}

Este truco fácil me ahorró mucho tiempo al desarrollar con ReactJS

El soporte del navegador se puede encontrar aquí: http://caniuse.com/#feat=pointer-events

Answer 9

Si tiene varios elementos en la división divisible, debe hacer esto:

$(''#clickable *'').click(function(e){ e.stopPropagation(); });

Answer 10

Todas las soluciones son complicadas y de jscript. Aquí está la versión más simple:

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

Answer 11

Usando return false; o e.stopPropogation(); No permitirá que se ejecute más código. Parará el flujo en este punto.

Answer 12

Use el método stopPropagation , vea un ejemplo:

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

Como dijo jQuery Docs:

stopPropagation método stopPropagation evita que el evento stopPropagation el árbol DOM, evitando que se notifique a los controladores principales del evento.

Tenga en cuenta que no impide que otros oyentes manejen este evento (por ejemplo, más de un controlador de clic para un botón), si no es el efecto deseado, debe usar stopImmediatePropagation en stopImmediatePropagation lugar.

Answer 13

agregue a como sigue:

<a href="http://foo.com" onclick="return false;">....</a>

o return false; desde el controlador de #clickable para #clickable como:

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

Answer 14

también puedes probar esto

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === ''div'')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

Answer 15

var inner = document.querySelector("#inner");
var outer = document.querySelector("#outer");
inner.addEventListener(''click'',innerFunction);
outer.addEventListener(''click'',outerFunction);

function innerFunction(event){
  event.stopPropagation();
  console.log("Inner Functiuon");
}

function outerFunction(event){
  console.log("Outer Functiuon");
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Event with Outer and Inner Progration</title>
</head>
<body>
<div id="outer" style="width:100px;height:100px;background-color:green;">
  <div id="inner" style="width:35px;height:35px;background-color:yellow;"></div>
</div>
</body>
</html>

Answer 16

<a onclick="return false;" href="http://foo.com">I want to ignore my parent''s onclick event.</a>