बच्चों पर होवर ईवेंट ट्रिगर न करें

Question

मेरे पास टाइल्स (घास, पानी, आदि) के साथ एक कंटेनर है और उनमें से कुछ में मेरे पास आइटम (सीमा-sprites, पेड़, और सामान्य आइटम) हैं। Sprites की प्रकृति के कारण, सभी आइटम 64x64 हैं जबकि टाइल्स केवल 32x32 हैं।

मेरी समस्या यह है कि मैं टाइल्स पर एक होवर ईवेंट ट्रिगर करना चाहता हूं, लेकिन कभी-कभी उन्हें किसी अन्य टाइल्स की वस्तुओं से छायांकित किया जाता है।

नीचे दी गई छवि समस्या दिखाती है। मोटी हरी क्षेत्र टाइल है कि वास्तव में पेड़-टाइल को घुमाने के लिए आच्छादित हो जाता है।

the problem http://upload.cip.nu/pfile.php?file_id=2327

सीएसएस:

#map_canvas .tile{ 
    height: 32px; 
    position: absolute; 
    width: 32px; 
} 
#map_canvas .tile .item{ 
    background-position: bottom right; 
    background-repeat: no-repeat; 
    bottom: 0; 
    display: inline-block; 
    height: 64px; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    right: 0; 
} 

एचटीएमएल, सरलीकृत:

<div class="tile" style="background-image: url(grass.png);"></div> 
<div class="tile" style="background-image: url(grass.png);"></div> 
<div class="tile" style="background-image: url(grass.png);"> 
    <div class="item" style="background-image(top-left-border.png);"></div> 
</div> 

यहाँ लाइव डेमो http://sleavely.com/tiles/

मैं भी नहीं जानता कि कैसे वाक्यांश के लिए प्रश्न, लेकिन यहां जाता है:

क्या यह केवल मूल तत्व (.tile) पर ईवेंट को ट्रिगर करना संभव है ताकि बच्चों को बहाना संभव हो (.item) मैं वास्तव में किस टाइल को रोकता हूं?

संपादित करें: धन्यवाद @Brilliand लिए मैं निम्नलिखित कार्यान्वित

function figureOutTile(e){ 
    var $source = jQuery(e.srcElement); 
    if($source.hasClass("item")){ 
     var $parent = $source.parent(); 
     var posx = $parent.attr("col"); 
     var posy = $parent.attr("row"); 
     if(e.offsetY <= 32){ 
      if(e.offsetX <= 32){ 
       return jQuery(".tile[col="+ (posx-1) +"][row="+ (posy-1) +"]"); 
      }else{ 
       return jQuery(".tile[col="+ posx +"][row="+ (posy-1) +"]"); 
      } 
     }else{ 
      if(e.offsetX <= 32){ 
       return jQuery(".tile[col="+ (posx-1) +"][row="+ posy +"]"); 
      }else{ 
       return $parent; 
      } 
     } 
    }else{ 
     return $source; 
    } 
} 
jQuery("#map_viewport").on({ 
    mouseenter: function(e) { 
     var $target = figureOutTile(e); 
     $target.addClass('hovered'); 
    }, 
    mouseleave: function() { 
     jQuery(".tile.hovered").removeClass('hovered'); 
    } 
}, '.tile');​ 

Answer 1

जहां तक ​​आपके ब्राउज़र की बात है, कुछ एक टाइल से बाहर चिपके हुए पर मँडरा पर मँडरा रूप में ही है टाइल जो कि बाहर निकल रही है, जो कुछ भी कवर किया जा रहा है उस पर होवर नहीं कर रहा है। अपनी विशिष्ट परिस्थिति में इसके आसपास काम करने के लिए, मैं सुझाव देता हूं कि अपने होवर फ़ंक्शन को #map_canvas पर डालें, और उस फ़ंक्शन में काम कर रहा है जिस पर टाइल को ढंक दिया जा रहा है। एक आयताकार ग्रिड में टाइल्स के लिए, यह सरल अंकगणितीय है।

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

संपादित करें: हालांकि यह जवाब पहले से ही स्वीकार किया गया है, यहाँ एक समाधान मेरी टिप्पणी के आधार पर दिया गया है:

$(".tile").append($("<div/>", { 
    css: { 
     position: "absolute", 
     top: 0, 
     left: 0, 
     right: 0, 
     bottom: 0, 
     "z-index": 50 
    } 
})); 

यह उन पर आइटम के साथ टाइल्स के सभी के लिए समस्या को ठीक करने लगता है, हालांकि यह ऊपर शिकंजा अपने : खाली घोषणाएं।मैं इसका मुख्य रूप से उल्लेख करता हूं क्योंकि यह आपके प्रश्न का उत्तर देने के करीब आता है।

Answer 2

संपादित करें: यदि यह वास्तव में घटना बुदबुदाती के साथ एक समस्या है और आप jQuery का उपयोग कर रहे, event.stopPropagation method की जाँच करें।

क्या आपने z-index es जोड़ने की कोशिश की है?

#map_canvas .tile{ 
     height: 32px; 
     position: absolute; 
     width: 32px; 
     z-index: 1; 
    } 
    #map_canvas .tile .item{ 
     background-position: bottom right; 
     background-repeat: no-repeat; 
     bottom: 0; 
     display: inline-block; 
     height: 64px; 
     margin: 0; 
     padding: 0; 
     position: absolute; 
     right: 0; 
     z-index: 2; 
    } 

Answer 3

$(".tile").children().on('mouseenter', function(e) { 
    e.stopPropogation(); 
}); 

या

$(".tile").on('mouseenter', function(e) { 
    if (this===e.target) { 
     //do stuff 
    } 
}); 

संपादित करें:

$("#map_viewport").on({ 
    mouseenter: function(e) { 
     if (this===e.target) { 
      $(element).addClass('someClass') 
     } 
    }, 
    mouseleave: function() { 
     $(element).removeClass('someClass') 
    } 
}, '.tile');