Part of our webapp has a section that boils down to this (simplified):\[code\]<html> <head> <title>Doubleclick test</title> <style type="text/css"> body { overflow:auto; background-color:White; } .wrapper { position:absolute; left:10; top:10; } .background { position:absolute; display:inline; width:1024; z-index:-1; height:150; } .outerspan { position:absolute; left:720px; top:50px; width:330px; height:80px; text-align:right; z-index:300; overflow:hidden; border: 1px black dashed; } .innerspan { overflow:hidden; } </style> </head> <body ondblclick="alert('doc dblclick')"> <div class="wrapper"> <img class="background" src="" alt="image placeholder" unselectable="on"/> <span class="outerspan" ondblclick="alert('span dblclick'); window.event.cancelBubble=true;" unselectable="on"> <span class="innerspan" unselectable="on">TEXT_HERE</span> </span> </div> </body></html>\[/code\](Illustrative only; the actual app does cleaner setup of its \[code\]ondblclick\[/code\] event, and I know the bubbling cancel isn't cross-browser as written.)The desired behaviour is that a doubleclick anywhere on or within the dashed border triggers the handler on the outer span, which tests OK in Firefox and Opera.Unfortunately, the target browser is IE8 or later, which (if the mouse is over a portion of the span which overlaps the \[code\]<img>\[/code\]) only triggers the span \[code\]ondblclick\[/code\] if the mouse is right on the dashed border or the innerspan text when the event is raised (it triggers the doc \[code\]ondblclick\[/code\] instead). In our tests IE9 behaved the same way.Already tried: setting \[code\]display:block;\[/code\] on both spans and \[code\]width:100%;height:100%;\[/code\] on the inner block; no luck. It works as required if a background colour is set on the outerspan, but unfortunately we need the background to be transparent, IE8 doesn't support RGBA for background colour, and using the gradient filter approach doesn't solve the event problem.Is it possible via CSS (or the markup) to make the event work properly without resorting to a transparent background image?(The ideal answer here would be a cross-browser solution, but one targeted to IE8+ is sufficient; thanks.)
Mouse event falling through <span>
- Thread starter Zick
- Start date