मैं जावास्क्रिप्ट घटनाओं को एक तत्व से दूसरे तत्व में कैसे पास करूं?

चरण सेट अप करना:मैं जावास्क्रिप्ट घटनाओं को एक तत्व से दूसरे तत्व में कैसे पास करूं?

मेरे पास 2 परतें दूसरे के शीर्ष पर हैं। निचली परत में लिंक (सरल छवियां) होती हैं, शीर्ष परत में नीचे की परत के लिए hovers जैसे उन्नत टूलटिप होते हैं। ये टूलटिप्स बड़े हो सकते हैं (वे आसानी से अन्य लिंक पर ओवरलैप कर सकते हैं, और लगभग हमेशा उस लिंक को ओवरलैप कर सकते हैं जो वे टूलटिपिंग कर रहे हैं)।

मेरा प्रश्न:

मैं चाहूँगा मेरी माउसओवर घटनाओं नीचे की परत पर पाए जाते हैं, और फिर माउसओवर पर ऊपरी परत में टूलटिप प्रदर्शित करते हैं। इस तरह से आप नीचे लिंक से बाहर निकलते हैं, ऊपरी परत में टूलटिप दूर हो जाता है, और नए लिंक के लिए टूलटिप दिखाया जा सकता है।

मैं शीर्ष परत से ईवेंट कैसे ले सकता हूं और उन्हें नीचे की परत पर कैसे पास कर सकता हूं? ताकि शीर्ष परत घटना पारदर्शी हो।

उदाहरण 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>

उदाहरण जावास्क्रिप्ट मैं सत्यापित किया है कि घटनाओं सामान्य की तरह काम करते हैं, और केवल शीर्ष क्लिक किया जाता है के साथ

। लेकिन मैं मूल रूप से "ओवर" आइटम ईवेंट पारदर्शी होना चाहता हूं।

स्रोत

2010-12-03 silkcom

कुछ उदाहरण पोस्ट करें एचटीएमएल – mpapis

उम्मीद है कि उदाहरण एचटीएमएल मदद करता है। – silkcom

आशा मैं ओपी समझते हैं, लेकिन आप किसी भी चयनकर्ता के बाद मूल घटना हुई है पर घटना को दोहराने कर सकते हैं: 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

आशा हो जाता है कि आप शुरू कर दिया। यदि आप कुछ और विवरण जोड़ते हैं, या अधिक जानकारी के साथ उस जेएसबीएन को संशोधित करते हैं तो हम थोड़ा सा पुनरावृत्ति कर सकते हैं।

मैंने 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

मैं जावास्क्रिप्ट घटनाओं को एक तत्व से दूसरे तत्व में कैसे पास करूं?

उत्तर

संबंधित मुद्दे