javascript - objeto - parametro event

¿Cómo detener la propagación de eventos con el atributo online onclick?

Question

Considera lo siguiente:

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

¿Cómo puedo hacerlo para que cuando el usuario haga clic en el intervalo, no dispare el evento de clic del div ?

Answer 1

¿Por qué no solo comprobar en qué elemento se hizo clic? Si hace clic en algo, window.event.target se asigna al elemento en el que se hizo clic, y el elemento en el que se hizo clic también se puede pasar como un argumento.

Si el objetivo y el elemento no son iguales, fue un evento que se propagó hacia arriba.

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

Answer 2

Esto funciono para mi

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

Answer 3

Esto también funciona: en el enlace HTML use onclick with return como esto:

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

Y luego la función comfirmClick () debería ser como:

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

Answer 4

Hay dos formas de obtener el objeto de evento desde dentro de una función:

1. El primer argumento, en un navegador compatible con W3C (Chrome, Firefox, Safari, IE9 +)
2. El objeto window.event en Internet Explorer (<= 8)

Si necesita admitir navegadores heredados que no siguen las recomendaciones de W3C, generalmente dentro de una función, usaría algo como lo siguiente:

function(e) {
  var event = e || window.event;
  [...];
}

que verificará primero uno, y luego el otro y almacenará lo que se haya encontrado dentro de la variable de evento. Sin embargo, en un controlador de eventos en línea no hay un objeto e para usar. En ese caso, tiene que aprovechar la colección de arguments que siempre está disponible y se refiere al conjunto completo de argumentos que se pasan a una función:

onclick="var event = arguments[0] || window.event; [...]"

Sin embargo, en general, debe evitar los controladores de eventos en línea si necesita algo complicado como detener la propagación. Escribir sus manejadores de eventos por separado y adjuntarlos a elementos es una idea mucho mejor a medio y largo plazo, tanto para facilitar la lectura como para mantenerlos.

Answer 5

Para las páginas web ASP.NET (no MVC), puede usar el objeto Sys.UI.DomEvent como contenedor del evento nativo.

<div onclick="event.stopPropagation();" ...

o, pase el evento como un parámetro a la función interna:

<div onclick="someFunction(event);" ...

y en alguna función:

function someFunction(event){
    event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
    // other onclick logic
}

Answer 6

Según esta página , en IE necesitas:

event.cancelBubble = true

Answer 7

Tenga en cuenta que window.event no es compatible con Firefox, y por lo tanto debe ser algo como:

e.cancelBubble = true

O bien, puede utilizar el estándar W3C para FireFox:

e.stopPropagation();

Si quieres ser elegante, puedes hacer esto:

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

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

Answer 8

Tuve el mismo problema: el cuadro de error js en IE: esto funciona bien en todos los navegadores hasta donde puedo ver (event.cancelBubble = true hace el trabajo en IE)

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

Answer 9

Utilice event.stopPropagation() .

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

Para IE: window.event.cancelBubble = true

<span onclick="window.event.cancelBubble = true; alert(''you clicked inside the header'');">something inside the header</span>

Answer 10

Utilice esta función, probará la existencia del método correcto.

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

Answer 11

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