Como evito que o evento onclick de um pai seja acionado quando uma âncora filha é clicada?

Atualmente estou usando o jQuery para tornar um div clicável e neste div também tenho âncoras. O problema que estou correndo é que quando clico em uma âncora, ambos os events de clique estão sendo triggersdos (para o div e a âncora). Como faço para evitar que o evento onclick do div seja acionado quando uma âncora é clicada?

Aqui está o código quebrado:

JavaScript

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

HTML

  

Bolha de events para o ponto mais alto no DOM em que um evento de clique foi anexado. Portanto, no seu exemplo, mesmo que você não tivesse outros elementos explicitamente clicáveis ​​no div, todos os elementos filho do div iriam borbulhar o evento click até o DOM até que o manipulador de events click do DIV o capturasse.

Existem duas soluções para isso: verificar quem realmente originou o evento. jQuery passa um object eventargs junto com o evento:

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

Você também pode append um manipulador de events de clique aos seus links, que os instrui a interromper o borbulhamento do evento após a execução do seu próprio manipulador:

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

Use o método stopPropagation , veja um exemplo:

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

Como dito pelo jQuery Docs:

stopPropagation método stopPropagation impede que o evento stopPropagation a tree DOM, impedindo que qualquer manipulador pai seja notificado do evento.

Lembre-se de que isso não impede que outros ouvintes manipulem esse evento (por exemplo, mais de um manipulador de cliques para um botão), se não for o efeito desejado, você deve usar stopImmediatePropagation .

Aqui a minha solução para todos os que estão procurando por um código não-jQuery (javascript puro)

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

Seu código não será executado se você clicar nos filhos do pai

você também pode tentar isso

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

Usando return false; ou e.stopPropogation(); não permitirá mais código para executar. Ele irá parar o stream neste ponto em si.

Se você tiver vários elementos no div clicável, deverá fazer isso:

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

Se você não pretende interagir com o (s) elemento (s) interno (s), em qualquer caso, uma solução CSS pode ser útil para você.

Basta definir o elemento interno / s para pointer-events: none

no seu caso:

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

ou para segmentar todos os elementos internos em geral:

 .clickable * { pointer-events: none; } 

Este hack fácil me poupou muito tempo enquanto desenvolvia com o ReactJS

O suporte do navegador pode ser encontrado aqui: http://caniuse.com/#feat=pointer-events

Escrevendo se alguém precisa (trabalhou para mim):

 event.stopImmediatePropagation() 

Desta solução

Aqui está um exemplo usando o Angular 2+

Por exemplo, se você quiser fechar um Componente Modal se o usuário clicar fora dele:

 // 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(); } 

Você precisa impedir que o evento atinja (borbulhando) o pai (o div). Veja a parte sobre borbulhamento aqui e informações específicas da API do jQuery aqui .

Para especificar algum sub-elemento como unclickable, escreva a hierarquia css como no exemplo abaixo.

Neste exemplo paro a propagação para qualquer elemento (*) dentro de td dentro de dentro de uma tabela com a class “.subtable”

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

No caso de alguém ter esse problema usando o React, foi assim que resolvi o problema.

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

Renderização do componente ():

 render() { ... return ( 
{e.preventDefault();e.stopPropagation()}}> ... [modal content] ...
) }

Ao adicionar uma function onClick para os events de clique do mouse modal infantil (content content) é impedido de alcançar a function ‘closeLogin’ do elemento pai.

Isso fez o truque para mim e eu fui capaz de criar um efeito modal com 2 simples divs.

adicione a seguinte forma:

 .... 

ou return false; do manipulador de #clickable para #clickable como:

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

Todas as soluções são complicadas e de jscript. Aqui está a versão mais simples:

 var IsChildWindow=false; function ParentClick() { if(IsChildWindow==true) { IsChildWindow==false; return; } //do ur work here } function ChildClick() { IsChildWindow=true; //Do ur work here } 
    Intereting Posts