javascript - bootstrap - Cómo detener el evento burbujeando con jquery en vivo?

context menu jquery bootstrap

Question

Estoy tratando de detener algunos eventos, pero stopPropagation no funciona con "en vivo", así que no estoy seguro de qué hacer. Encontré esto en su sitio.

Los eventos en vivo no burbujean de la manera tradicional y no se pueden detener utilizando stopPropagation o stopImmediatePropagation. Por ejemplo, tomemos el caso de dos eventos de clic, uno vinculado a "li" y otro "li a". Si se produce un clic en el anclaje interno, se activarán AMBOS eventos. Esto se debe a que cuando $ ("li"). Bind ("click", fn); está limitado, en realidad está diciendo "Cada vez que se produce un evento de clic en un elemento LI, o dentro de un elemento LI, active este evento de clic". Para detener el procesamiento posterior de un evento en vivo, fn debe devolver falso

Dice que fn debe devolver falso así que lo que traté de hacer

 $(''.MoreAppointments'').live(''click'', function(e) {
   alert("Hi");
   return false;
 });

pero eso no funcionó, así que no estoy seguro de cómo hacerlo volver falso.

Actualizar

Aquí hay algo más de información.

Tengo una celda de tabla y le enlace un evento de clic.

 $(''#CalendarBody .DateBox'').click(function(e)
    {
        AddApointment(this);
    });

Entonces AddApointment solo hace un cuadro de diálogo ui.

Ahora el código en vivo (MoreAppointments) se encuentra en esta celda de la tabla y es básicamente una etiqueta de anclaje. Entonces, cuando hago clic en la etiqueta ancla, primero va al código anterior (addApointment - por lo tanto, ejecuta ese evento primero) ejecuta eso pero no abre mi cuadro de diálogo sino que va directamente al evento (MoreAppointment) y ejecuta ese código. Una vez que ese código se ha ejecutado, inicia el cuadro de diálogo desde "agregar una cita".

Actualización 2

Aquí hay algunos de los html. No copié toda la tabla porque es un poco grande y todas las celdas se repiten con los mismos datos. Si es necesario, lo publicaré.

 <td id="c_12012009" class="DateBox">
        <div class="DateLabel">
            1</div>
        <div class="appointmentContainer">
            <a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a>
        </div>
        <div class="appointmentOverflowContainer">
            <div>
                <a class="MoreAppointments">+1 More</a></div>
        </div>
    </td>

Answer 1

Estoy usando esto:

if(event.target != this)return; // stop event bubbling for "live" event

Answer 2

He usado este tipo de código y me funcionó:

$(''#some-link'').live(''click'', function(e) {
    alert("Link clicked 1");
    e.stopImmediatePropagation();
});

$(''#some-link'').live(''click'', function(e) {
    alert("Link clicked 2");    
});

entonces, me parece, que ahora JQuery admite la detención de la Propagación inmediata con eventos en vivo

Answer 3

La respuesta corta es simple, no puedes .

El problema

Normalmente, puede evitar que un evento pase de "burbujeo" a controladores de eventos en elementos externos porque los manejadores de elementos internos se llaman primero . Sin embargo, los "eventos en vivo" de jQuery funcionan al adjuntar un controlador de proxy para el evento deseado al elemento de documento, y luego llamar al manejador apropiado definido por el usuario después de que el evento se propague por el documento .

Ilustración de burbujas http://shog9.com/so_1967537_bubbling.png

Esto generalmente hace que la vinculación "en vivo" sea un medio bastante eficiente de vincular eventos, pero tiene dos grandes efectos secundarios: primero, cualquier controlador de eventos adjunto a un elemento interno puede evitar que los eventos "en vivo" se activen por sí mismo o por cualquiera de sus hijos; en segundo lugar, un controlador de eventos "en vivo" no puede evitar que se desencadene ningún controlador de eventos adjunto directamente a los elementos secundarios del documento . Puede detener el procesamiento posterior, pero no puede hacer nada con el procesamiento que ya se ha producido ... Y para cuando se active el evento en vivo, ya se ha llamado al controlador conectado directamente al niño.

Solución

Su mejor opción aquí (por lo que puedo decir de lo que ha publicado) es usar enlace activo para ambos manejadores de clics. Una vez hecho esto, debe poder return false del controlador .MoreAppointments para evitar que se llame al controlador .DateBox .

Ejemplo:

$(''.MoreAppointments'').live(''click'', function(e) 
{
  alert("Hi");
  return false; // prevent additional live handlers from firing
});

// use live binding to allow the above handler to preempt
$(''#CalendarBody .DateBox'').live(''click'', function(e)
{
   AddApointment(this);
});

Answer 4

Lo he usado en ciertas situaciones Nota: no siempre aplicable, así que evalúe sus necesidades como siempre:

html:

<a href="#" className="my-class-name">Click me</a>

js (en tu controlador de eventos en vivo):

if(e.target.className == ''my-class-name'') {
    e.preventDefault();
    // do something you want to do...
}

De esta forma, mi evento en vivo solo ''se ejecuta'' cuando se hace clic en un tipo de elemento / nombre de clase particular attr.

El e.preventDefault() aquí es para detener el enlace que estoy haciendo clic moviendo la posición de desplazamiento a la parte superior de la página.

Answer 5

Tal vez podría verificar que el evento click no ocurra en un elemento a:

$(''#CalendarBody .DateBox'').click(function(e) {
  // if the event target is an <a> don''t process:
  if ($(e.target).is(''a'')) return;

  AddApointment(this);
});

¿Podría funcionar?

Answer 6

yo suelo

e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it''s cancelable)

Answer 7

Simply use **"on"** function to bind click event of child as well as parent element.

Example :  $("#content-container").on("click","a.childElement",function(e){
                   alert("child clicked");
                   e.stopPropagation() ; 
                }); 

                $("#content-container").on("click","div.parentElement",function(e){
                  alert("parent clicked");
                }); 
( where content-container is the outer div containing both parent as well as child elements. )

        Here only "child clicked" alert will occur.

    Thanks.