Prevenir javascript onclick no elemento filho

StackOverflow https://stackoverflow.com/questions/1431812

  •  07-07-2019
  •  | 
  •  

Pergunta

Ok, pergunta simples: 

<div onclick="javascript:manualToggle(this)">
    <span>Allowed to click</span>
    <span>Not allowed to click</span>
    <span>Allowed to click</span>
</div>

Sem replicar o manualToggle para os 2 vãos que são permitidos para clicar, como posso evitar que o "Não permitido para clicar" span de disparar a sua div pai onclick evento quando ele é clicado?

Foi útil?

Solução

Você precisa de um manipulador de eventos (é muito fácil de fazer isso em algo como jQuery) que as capturas cliques para os vãos dentro da div e só é acionado a função se, por exemplo, o tempo tem / não tem uma classe particular.

Outras dicas

Dê o tempo de um ID de uma anexação onclick evento a ele e utilização

amostra A jQuery 

$("#spn2").click(function(event){
  event.stopPropagation();  
});

event.stopPropagation () : Pára o borbulhar do um evento de elementos pai, impedindo qualquer manipuladores-mãe de ser notificado do evento.

Não faria sentido usar uma biblioteca, mas sem você pode tentar este (editado com uma página inteira para teste): 

<html><head></head>
<body>
<script type="text/javascript"><!--
function manualToggle(val)
{
    alert(val.id);
}

--></script>

<div id="test" onclick="manualToggle(this);">
    <span>Allowed to click</span>
    <span onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();">Not allowed to click</span>
    <span>Allowed to click</span>
</div>
</body>
</html>

mootools você pode usar o stopPropagation método: 

$('myChild').addEvent('click', function(ev){
    ev.stopPropagation(); // this will prevent the event to bubble up, and fire the parent's click event.
});

http://mootools.net/docs/core/Native/ evento # evento: stopPropagation

também ver esta questão muito semelhante: Como posso parar um evento onclick de disparo para o elemento pai quando criança é clicada?

Eu só tive o mesmo problema e não conseguia jQuery ao trabalho então eu usei simples Javascript: 

document.getElementById("your_span").addEventListener("click", (event) => {
    event.stopPropagation();
});

Isso fez o truque para mim. Obviamente, você precisa adicionar o addEventListener a cada elemento que você quer aplicar isso a. Desde que eu fazer um monte de manipulação DOM isso não foi um problema para mim. Espero que isso ajude alguém:)

Solução possível: dar do id e do tempo de verificar se o id clicado é permitido ser clicado em sua função

má idéia: você não sabe qual espaço é clicado desde que você chamar a função do seu div ...

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top