35

I have a map with SVG text elements to name the locations. I want the locations (shapes) to be clickable, and they are, but because the text elements are on top of them, if someone hovers over a text element and clicks, then nothing happens because the shape was not clicked : the text element was. How can I make it so that if the text element is clicked, the click goes "through" it and to the shape ?

Cystack
  • 3,301
  • 5
  • 35
  • 33

3 Answers3

68

Mozilla introduced a CSS property for this purpose called pointer-events. It was originally limited to SVG shapes, but is now supported on most DOM elements in modern browsers:

span.label { pointer-events: none; }

The answer to this question has some good information on achieving the same result in old IE:

css 'pointer-events' property alternative for IE

Community
  • 1
  • 1
Matt Stone
  • 3,705
  • 4
  • 23
  • 40
  • COOL, didn't know it worked with SVG, only "regular" elements – Cystack Oct 16 '12 at 00:33
  • 1
    @Cystack the 'pointer-events' property has been part of SVG since the very beginning (and no, it wasn't introduced by Mozilla - though Mozilla did pioneer the use of this property outside of svg). As the first link there says "Warning: The use of pointer-events in CSS for non-SVG elements is experimental". – Erik Dahlström Oct 16 '12 at 11:02
  • 1
    Downvoting him just for this is mean though ;) – Cystack Oct 25 '12 at 13:12
  • 1
    I couldn't get stackLabels to not steal mouse events in Highcharts, this was the only workaround I could get to work! – boxed Jul 01 '14 at 08:28
8

add this css to the text:

pointer-events: none;
william malo
  • 2,480
  • 2
  • 18
  • 18
3

If it is possible to group the map shapes with the text inside of a "<g>" element, then you can attach the click to the group rather than the shape. Doing this also gives the added benefit of transforms applied to the group will apply to both the shape and the text. If grouping is not possible, then I agree the previous answer is definitely your best shot. Essentially what is happening is this: most people visualize a click penetrating downward through your z-index, but it doesn't work that way. The click bubbles up through the DOM, so if the text doesn't handle the click, it bubbles up to the next DOM element which is the parent group or container. This continues upward until it reaches the topmost DOM element.

user2009125
  • 76
  • 3