javascript - traversing - w3c mouse events




Como parar a propagação de eventos com o atributo onclick in-line? (8)

De acordo com esta página , no IE você precisa:

event.cancelBubble = true

Considere o seguinte:

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

Como posso fazer com que, quando o usuário clica no intervalo, ele não dispare o evento de clique do div ?


Eu tive o mesmo problema - js caixa de erro no IE - isso funciona bem em todos os navegadores, tanto quanto eu posso ver (event.cancelBubble = true faz o trabalho no IE)

onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"

Isso funcionou para mim

<script>
function cancelBubble(e) {
 var evt = e ? e:window.event;
 if (evt.stopPropagation)    evt.stopPropagation();
 if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>

<div onclick="alert('Click!')">
  <div onclick="cancelBubble(event)">Something inside the other div</div>
</div>

Isso também funciona - No link HTML use onclick com return assim:

<a href="mypage.html" onclick="return confirmClick();">Delete</a>

E então a função comfirmClick () deve ser como:

function confirmClick() {
    if(confirm("Do you really want to delete this task?")) {
        return true;
    } else {
        return false;
    }
};

Por que não apenas verificar qual elemento foi clicado? Se você clicar em algo, window.event.target será atribuído ao elemento que foi clicado e o elemento clicado também poderá ser passado como argumento.

Se o alvo e o elemento não forem iguais, foi um evento que se propagou.

function myfunc(el){
  if (window.event.target === el){
      // perform action
  }
}
<div onclick="myfunc(this)" />

Tenha em mente que window.event não é suportado no FireFox e, portanto, deve ser algo nos moldes de:

e.cancelBubble = true

Ou você pode usar o padrão W3C para FireFox:

e.stopPropagation();

Se você quiser ficar chique, você pode fazer isso:

function myEventHandler(e)
{
    if (!e)
      e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    //IE8 and Lower
    else {
      e.cancelBubble = true;
    }
}

Use esta função, ela testará a existência do método correto.

function disabledEventPropagation(event)
{
   if (event.stopPropagation){
       event.stopPropagation();
   }
   else if(window.event){
      window.event.cancelBubble=true;
   }
}

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header'); event.stopPropagation()">
    something inside the header
  </span>
</div>




dom