Wie verbreitet man einen Klick auf alle divs unter dem Cursor?

Nachdem FelixKlings Vorschlag, document.elementFromPoint() und Amberlamps 'Geige zu verwenden, und jQuery für die DOM-Interaktionen verwendet wurde, kam ich zu folgendem Ergebnis:

DEMO

try/catch/finally wird verwendet, um sicherzustellen, dass Elemente erneut angezeigt werden, auch wenn ein Fehler auftritt.

Zwei Mechanismen ermöglichen das Durchlaufen des Click-Ereignisses:

• Anhängen des Handlers an nur ausgewählte Elemente (Standard jQuery).
• Namespacing des Klickereignisses, click.passThrough analog zu event.stopPropagation() .

Getrennt oder in Kombination bieten diese Mechanismen eine gewisse Flexibilität bei der Kontrolle der Anheftung und Ausbreitung des "PassThrough" -Verhaltens. Versuchen Sie beispielsweise in der DEMO, die Klasse p aus dem Element "b" zu entfernen und zu sehen, wie sich das Propagierungsverhalten geändert hat.

Wie es aussieht, muss der Code bearbeitet werden, um ein anderes Verhalten auf Anwendungsebene zu erhalten. Eine allgemeinere Lösung würde:

• ermöglicht die programmatische Verknüpfung von app-spezifischem Verhalten
• erlauben eine programmatische Hemmung der "passThrough" -Ausbreitung, analog zu event.stopPropagation() .

Diese beiden Ambitionen könnten erreicht werden, indem ein clickPassthrough -Ereignis in jQuery mit dem zugrunde liegenden "passThrough" -Verhalten eingerichtet wird, aber dafür wäre mehr Arbeit erforderlich. Vielleicht möchte jemand mal ausprobieren.

Das ist nicht so einfach, wie Sie vielleicht denken. Das ist eine Lösung, die ich mir ausgedacht habe. Ich habe es nur in Chrome getestet und ich habe kein Framework verwendet.

Das folgende Snippet dient nur dazu, jedem div im Dokument ein click -Ereignis hinzuzufügen, das bei Auslösung seinen Klassennamen ausgibt.

Ein Klick-Ereignis wird an das body-Element angehängt, so dass jedes einzelne Klick-Ereignis von unserem Skript bemerkt wird.

Iteriere durch alle DIVs, die du überprüfen möchtest (du solltest hier vielleicht deinen bevorzugten DIV-Bereich anpassen). Generieren Sie ihren berechneten Stil und prüfen Sie, ob die Mauskoordinaten innerhalb des Bereichs der Position der Div sowie ihrer Breite und Höhe liegen. Klick-Ereignis wird nicht ausgelöst, wenn das div-Element unser Quellenelement ist, da das click-Ereignis bereits ausgelöst wurde.

CSS:

HTML:

Ich habe auch ein jsFiddle

Wenn Sie Elemente stapeln absolut kann es einfacher sein, sie alle in einem positionierten Container zu stapeln, und verarbeiten die Ereignisse von diesem Elternteil. Sie können dann die Kinder manipulieren, ohne etwas messen zu müssen.