javascriptイベントをある要素から別の要素に渡すにはどうすればよいですか？

ステージの設定：javascriptイベントをある要素から別の要素に渡すにはどうすればよいですか？

2つのレイヤーを重ねて表示します。最下層にはリンク（シンプルな画像）があり、最上層には最下層のホバーのような高度なツールチップが含まれています。これらのツールチップは、大きくてもかまいません（他のリンクと簡単に重なり合うことができ、ほとんどの場合、ツールチップをリンクします）。

私の質問：

私は私のマウスオーバーイベントが最下層に発生し、その後、マウスオーバーで上層のツールチップを表示したいと思います。この方法で、下のリンクから移動すると、上のレイヤーのツールチップが消え、新しいリンクのツールチップが表示されます。

トップレイヤーからイベントを受け取り、下のレイヤーに渡す方法を教えてください。トップレイヤーがイベントトランスペアレントになるようにします。

例HTML：私はイベントが通常のように動作し、かつ上面のみがクリックされたことを確認したJavaScriptの例では

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

。しかし、私は基本的に、 "上の"アイテムをイベントに透明にしたいと思っています。

出典

2010-12-03 silkcom

投稿例html – mpapis

うまくいけば、htmlの例が役立ちます。 – silkcom

私はOPを理解してほしいが、元のイベントが発生した後、あなたがどんなセレクターにイベントを複製することができます：リンクされたサンプルでhttp://jsfiddle.net/Cr9Kt/1/

を、私は最上層にイベントを取ると、最下位層で発生した同様のイベントを作成します。これは、個々の要素を個々にクリックすることで（上下全体とは対照的に）、これをさらに進めることができます。

これは別の質問から借りたアイデアです：Triggering a JavaScript click() event at specific coordinates

出典

2010-12-03 22:02:37

これは最善の解決策だと思います。今私はマウスオーバーとマウスアウトでそれを取得する必要があります。ありがとう – silkcom

私はあなたが求めていることを理解しているとは確信していません。それはツールチップのようなものです。次に、jQuery、CSS、およびHTMLを使用してツールチップを作成する方法の例を示します。あなたが開始される

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

希望。さらに詳細を追加したり、jsbinをより詳細に変更したりすると、少し繰り返すことができます。

jQueryを使用して、ツールヒント情報をhtml要素自体に格納するための例を少し更新しました。これは少しきれいです。

ボブ

出典

2010-12-03 21:28:31 rcravens

鉱山と通常のツールチップとの主な違いは、鉱山も元のリンクと重複する可能性があることです（この部分については忘れて申し訳ありません）。 - オリジナルの質問が更新されました – silkcom

これは...それはあなたの機能を偽装し、過度に複雑で洗練見えるかもしれません..しかし、それは動作します。）

$(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; 
    }); 
});

は、ここでそれを試してみてください。 http://jsfiddle.net/neopreneur/vzq4z/1/

出典

2010-12-03 22:26:10

javascriptイベントをある要素から別の要素に渡すにはどうすればよいですか？

答えて

関連する問題