Do not fire children

Question

I have a container with plates (grass, water, etc.), and in some of them I have objects (border sprites, trees and general objects). Due to the nature of sprites, all elements are 64x64, and tiles are only 32x32.

My problem is that I want to trigger a hover event on tiles, but sometimes they are obscured by elements of other elements.

The image below shows the problem. A thick green area is a tile in which it really gets stuck when I want to put a tile on a tree.

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

CSS:

#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; } 

HTML simplified:

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

Here's a live demo http://sleavely.com/tiles/

I don’t even know how to formulate this question, but here goes:

Is it possible to trigger an event only for the parent element (.tile), so that the overflowing child elements (.item) do not obfuscate which plate I really pointed?

EDIT: thanks to @Brilliand I implemented the following

 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

For your browser, hovering over something sticking out of a tile is the same as hovering over a tile from which it sticks out, rather than hovering over something that is closed. To get around this in your specific situation, I suggest putting your hover function on #map_canvas and work out in this function the tile is hanging over it. For tiles in a rectangular grid, this is simple arithmetic.

Of course, for this you will need to enable the mousemove event (to determine when the mouse moves from one tile to another), and you should probably include code to exit the function if the user is still hanging over the same tile.

EDIT: although this answer has already been taken, the solution here is based on my comment:

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

This, apparently, fixes the problem for all tiles with elements on them, although this ignores yours: empty ads. I mention this mainly because it comes close to answering your question as asked.

Answer 2

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

or

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

EDIT:

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

Answer 3

Edit: if this is really a problem with a bubbling event, and you are using jQuery, look at the event.stopPropagation method .

Have you tried adding 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; }