¿Cómo paso eventos de JavaScript de un elemento a otro?

Configuración de la etapa:¿Cómo paso eventos de JavaScript de un elemento a otro?

Tengo 2 capas una encima de la otra. La capa inferior contiene enlaces (imágenes simples). La capa superior contiene información sobre herramientas avanzada, como los elementos emergentes para la capa inferior. Estos tooltips pueden ser grandes (pueden superponerse a otros enlaces fácilmente, y casi siempre se superponen al enlace al que están haciendo clic).

Mi pregunta:

me gustaría que mis eventos mouseover que se produzca en la capa inferior, y luego pasar el ratón mostrar la información correspondiente en la capa superior. De esta manera, a medida que se mueve desde el enlace inferior, la información sobre herramientas en la capa superior se va y puede aparecer la información sobre herramientas para el nuevo enlace.

¿Cómo tomo los eventos de la capa superior y los paso a la capa siguiente? Para que la capa superior sea transparente para el evento.

Ejemplo HTML:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css" media="screen"><!-- 
     .tile { width: 100px; height: 100px; position: absolute; } 
     .tile:hover, over:hover {border: 1px solid black;} 
     .over { width: 100px; height: 100px; position: absolute; display:none} 
     .stack, #sandwich { width: 400px; height: 400px; position: absolute; } 
     #tile1 {top: 50px; left: 50px;} 
     #tile2 {top: 75px; left: 10px;} 
     #tile3 {top: 150px; left: 310px;} 
     #tile4 {top: 250px; left: 250px;} 
     #tile5 {top: 150px; left: 150px;} 
     #over1 {top: 55px; left: 55px;} 
     #over2 {top: 80px; left: 15px;} 
     #over3 {top: 155px; left: 315px;} 
     #over4 {top: 255px; left: 255px;} 
     #over5 {top: 155px; left: 155px;} 
    --></style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

    <script> 
    $(document).ready(function(){ 
     $('div.tile').click(function(){ 
      $('#log').html(this.id + " clicked"); 
      return false; 
     })   
     $('div#top').click(function(){ 
      $('#log').html('Top clicked'); 
      return false; 
     }) 
    }); 
    </script> 
</head> 

<body> 
<div id="sandwich"> 
    <div class="stack" id="bottom"> 
     <div class="tile" id="tile1">1</div> 
     <div class="tile" id="tile2">2</div> 
     <div class="tile" id="tile3">3</div> 
     <div class="tile" id="tile4">4</div> 
     <div class="tile" id="tile5">5</div> 
    </div> 
    <div class="stack" id="top"> 
     <div class="over" id="over1">Tooltip for 1</div> 
     <div class="over" id="over2">Tooltip for 2</div> 
     <div class="over" id="over3">Tooltip for 3</div> 
     <div class="over" id="over4">Tooltip for 4</div> 
     <div class="over" id="over5">Tooltip for 5</div> 
    </div> 
</div> 
<div id="log"> 
</div> 
</body> 
</html>

Con el ejemplo de JavaScript He verificado que los eventos funcionan de manera normal, y se hace clic en la parte superior solamente. Pero básicamente quiero que los elementos "sobre" sean transparentes para el evento.

Fuente

2010-12-03 silkcom

publique un ejemplo html – mpapis

esperemos que el ejemplo html ayude. – silkcom

Esperanza entiendo el PO, pero se puede replicar el evento en cualquier selector después de ocurrido el evento original: http://jsfiddle.net/Cr9Kt/1/

En la muestra enlazada, me tome el evento en la capa superior y crea un evento similar disparado en la capa inferior. Puede llevar esto más lejos con cada clic individual de cada elemento (en lugar de arriba y abajo como un todo).

Ésta es una idea tomada de otra pregunta: Triggering a JavaScript click() event at specific coordinates

Fuente

2010-12-03 22:02:37

Creo que esta es la mejor solución. Ahora solo necesito ponerlo mouseover y mouseout también. Gracias – silkcom

No estoy seguro de entender lo que está pidiendo. Me suena un poco a punta de herramienta. Aquí hay un ejemplo de cómo hacer una información sobre herramientas usando jQuery, CSS y HTML.

http://jsbin.com/ilali3/13/edit

la esperanza de que podrá iniciar. Si agrega más detalles, o modifica esa jsbin con más detalles, podemos repetir un poco.

Actualicé un poco el ejemplo para incluir el almacenamiento de la información de la información de la herramienta en el elemento html mediante jQuery. Esto es un poco más limpio.

Bob

Fuente

2010-12-03 21:28:31 rcravens

La principal diferencia entre la mía y una información sobre herramientas normal, es que la mía también puede superponerse con el enlace original (lo siento, olvidé mencionar esta parte). - pregunta original actualizada – silkcom

Esto puede parecer demasiado complejo y poco elegante ... que finge su funcionalidad .. pero funciona;)

$(document).ready(function(){ 
    var tileData = new Array(); 

    // get coordinate data for each tile 
    $('div.tile').each(function(){ 
     var tileInfo = {}; 
     tileInfo.id = this.id; 
     tileInfo.text = $(this).text(); 
     tileInfo.width = $(this).outerWidth(); 
     tileInfo.height = $(this).outerHeight(); 
     tileInfo.position = $(this).position(); 
     tileInfo.coords = {}; 
     tileInfo.coords.top = tileInfo.position.top; 
     tileInfo.coords.right = tileInfo.position.left + tileInfo.width; 
     tileInfo.coords.bottom = tileInfo.position.top + tileInfo.height; 
     tileInfo.coords.left = tileInfo.position.left; 

     tileData.push(tileInfo); 
    }); 

    $('div.tile').click(function(){ 
     $('#log').html(this.id + " clicked"); 
     return false; 
    })  

    $('div#top').click(function(event){ 
     $('#log').html('Top clicked'); 

     // try to find tile under your mouse click 
     for(i=0; i<tileData.length;i++){ 
      if(
       event.pageX >= tileData[i].coords.left && 
       event.pageX <= tileData[i].coords.right && 
       event.pageY >= tileData[i].coords.top && 
       event.pageY <= tileData[i].coords.bottom 
      ) { 
       // found a tile! trigger its click event handler 
       $('#' + tileData[i].id).click(); 
      } 
     } 

     return false; 
    }); 
});

probar aquí: http://jsfiddle.net/neopreneur/vzq4z/1/

Fuente

2010-12-03 22:26:10

¿Cómo paso eventos de JavaScript de un elemento a otro?

Respuesta

Cuestiones relacionadas