Rastrear solo el movimiento del mouse del elemento secundario fijo en una etiqueta div anidada

Tengo un entorno en el que puede haber n número de tags div anidadas. Tengo que rastrear el momento de movimiento del mouse en div infantil.

tengo el siguiente código. el resultado se muestra en la lista.

Problema: si agrego más ‘div’ para niños, el movimiento del mouse rastrea también todos los padres div.

Lo que quiero : obtener la pista del mouse para solo el área de mouse mouse.

También traté de filtrar usando: flotar, pero todos los elementos están suspendidos. JSFIddle

var count = 0; $('div').on({ mousemove: function(event) { $('.mousemovement').append('
  • MouseMove' + $(this).attr('class') + '
  • '); if (count > 10) { $('.mousemovement').html(''); count = 0; } count++; } });
     .outer { background-color: #aeaeae; height: 200px; width: 200px; float: left; } .inner { margin: 5px 0px; background-color: #ccc; height: 100px; width: 100px; float: left; } .inner2 { margin: 5px 0px; background-color: green; height: 60px; width: 60px; float: left; } 
      

    Debería usar event.stopPropagation () , ver fragmento a continuación.

    Evita que el evento burbujee en el árbol DOM, evitando que se notifique a ningún controlador principal del evento.

    Espero que esto ayude.


     var count = 0; $('div').on({ mousemove: function(event) { event.stopPropagation(); $('.mousemovement').append('
  • MouseMove' + $(this).attr('class') + '
  • '); if (count > 10) { $('.mousemovement').html(''); count = 0; } count++; } });
     .outer { background-color: #aeaeae; height: 200px; width: 200px; float: left; } .inner { margin: 5px 0px; background-color: #ccc; height: 100px; width: 100px; float: left; } .inner2 { margin: 5px 0px; background-color: green; height: 60px; width: 60px; float: left; }