Halftransparante div moet click events negeren

[apNia]

Ik heb een aantal divs half over elkaar liggen, met elk een schaduwrand. De schaduwrand van een bovenliggende div vangt steeds clicks op, en dat is juist iets wat ik niet wil. Stel div 5 zweeft boven div 4, en ik wil op 4 klikken, maar ik klik eigenlijk op de schaduwrand van div 5, dan wil ik dat de clickevent wordt doorgepassed naar de onderliggende div, alsof de schaduwrand van div 5 niet bestaat.

Nou heb ik ooit een workaround gemaakt waar ik (geloof ik) de schaduw div hide, een nieuwe click plaatste oid en hem weer toon, maar het voelt zo quirky aan.

Wat is de juiste manier om dit voor elkaar te krijgen? Kon zelf helaas geen best practices vinden op Google.

[MueR]

Heb je ergens een (uitgeklede) testcase? Hoe maak je die schaduw, CSS of met images?

[apNia]

Divjes zijn in feite dit:

code:

__________________
| |            |  |
| |            |  |
| |            |  |
| |            |  |
| |            |  |
| |            |  |
| |            |  |
| |            |  |
|_|____________|__|

Waat de middelste div alleen clicks zou moeten afvangen. De buitste 2 zijn divs met een background image.

[Bosmonster]

Zet je de onclick op de binnenste div?

[apNia]

Middelste heeft idd de click listener. Als een div boven een andere zweeft vangt hij de clickevents af en anderen er onder krijgen hem niet.
Mijn situatie:


Ik wil op 4 klikken maar klik in veel gevallen op de schaduwrand, de onderliggende div zal de event nooit krijgen, al hangt er wel of geen listener aan de schaduw div.

[ Voor 15% gewijzigd door apNia op 11-04-2011 13:22 ]

[Bozozo]

Misschien kun je pointer-events: none gebruiken?

[apNia]

dit is dus precies wat ik nodig had!

Voorheen gebruikte ik een workaround waar ik de event binnenkreeg, hem hide, elementFromPoint gebruikte, en hem dan weer toonde. Maar dit is veel mooier, en exact wat ik zocht.

Maar nu de grote helaas, heb hem op IE9 en IE8 getest en die kennen het weer niet. DERP

[Bosmonster]

Als het goed is bubbelt het event gewoon door de boom en weer terug, dus zou je dit gewoon moeten ontvangen op onderliggende div. Enige is dat je wel het bubblen moet stoppen op het moment dat ie een geldige target tegenkomt.

[apNia]

Event bubbeling is van kracht op childs en parents, niet op naast elkaar liggende divs.

[.Johnny]

Op IE9 zou het wel moeten werken volgens mij:
MSDN: pointerEvents Property (CSSStyleDeclaration, currentStyle, style, ...)

Maar daar heb je met IE8 nog steeds niets aan natuurlijk...

[BoAC]

apNia schreef op maandag 11 april 2011 @ 14:20:
Event bubbeling is van kracht op childs en parents, niet op naast elkaar liggende divs.

Waarom zou je ze naast elkaar leggen en niet in elkaar?

[Bosmonster]

apNia schreef op maandag 11 april 2011 @ 14:20:
Event bubbeling is van kracht op childs en parents, niet op naast elkaar liggende divs.

Dan de bubbling naar de ondergrond opvangen en terugrekenen naar coordinaten van de children

Andere oplossing: CSS3 shadows gebruiken (eventueel met filter-fallback foor IE7/8).

[apNia]

.Johnny schreef op maandag 11 april 2011 @ 14:22:
Op IE9 zou het wel moeten werken volgens mij:
MSDN: pointerEvents Property (CSSStyleDeclaration, currentStyle, style, ...)

Maar daar heb je met IE8 nog steeds niets aan natuurlijk...

Nee ik zit daar nu ook onderzoek naar te doen. Maar dat ik IE9 niet voor elkaar ligt komt waarschijnlijk door een eigen foutje die ik nu aan het onderzoeken ben. Dus daar kom ik zo op terug. En IE8 blijft een probleem, maar daar kan ik bij wijze van op specialcasen en de shadows gewoon hiden.

BoAC schreef op maandag 11 april 2011 @ 14:24:
[...]
Waarom zou je ze naast elkaar leggen en niet in elkaar?

Omdat dat logisch is? Het zijn los van elkaar bewegende divs. Dus:

code:

<div id="container">
    <div id="div1">
        <div class="borderLeft"></div>
        <div class="borderRight"></div>
    </div>
    <div id="div2">
        <div class="borderLeft"></div>
        <div class="borderRight"></div>
    </div>
    <div id="div3">
        <div class="borderLeft"></div>
        <div class="borderRight"></div>
    </div>
</div>

Het lijkt me niet gewenst dat die in elkaar zitten BoAC