So verwenden Sie CSS-Attribute, um Mausereignisse zu blockieren (Mausklicks können obere Elemente durchdringen)

Ursprung: Vor einigen Tagen hat ein Tester eine Anforderung gesendet, die das Anzeigen eines Bildes erforderte:

Als ich diese Anforderung sah, war ich etwas verwirrt. Derzeit wird das Dropdown-Datumsmenü nur dann als Reaktion auf das Klickereignis angezeigt, wenn auf den leeren Bereich des Datumsinhaltsfelds geklickt wird.

Ich habe dieses Symbol absolut im Datumsinhaltsfeld positioniert. Seine Ebenenabmessung ist höher als das Datumsinhaltsfeld, sodass es nicht auf Klickereignisse reagiert, wenn Sie darauf klicken. Meine erste Reaktion war Event-Klick-Penetration, aber wie erreicht man das? Ich habe das Gefühl, dass ich einen blinden Fleck in meinem Wissen berührt habe, den ich ignoriert habe.

Ich war so verwirrt, dass ich wie ein Tiger agierte und anfing, für Google zu programmieren …

Die Fakten haben bewiesen, dass es wichtig ist, wissenschaftlich im Internet zu surfen. Google ist genauer als Baidu. Ich beschwere mich schon wieder über Baidus Anzeigen …

Um sicherzustellen, dass der vom Icon abgedeckte Bereich der Inhaltsbox auch auf Klickereignisse reagieren kann, können Sie dies mit der css Eigenschaft poniter-events erreichen.

Es gibt viele Werte für poniter-events , aber die meisten davon beziehen sich auf svg und können direkt übersprungen werden. Es gibt zwei allgemeine Attributwerte: none | auto .

auto : Dies verhält sich genauso, als ob pointer-events nicht angegeben wäre. none : Das Element wird niemals target von Mausereignissen sein. Allerdings können Mausereignisse an untergeordnete Elemente geleitet werden, wenn pointer-events des untergeordneten Elements einen anderen Wert angibt. In diesem Fall lösen die Mausereignisse in der Erfassungs- oder Bubbling-Phase Ereignis-Listener auf dem übergeordneten Element aus.

Werfen wir einen Blick auf die Kompatibilität von poniter-events :

Desktop-Browser

IE : 11+ (IE6~IE10 werden nicht unterstützt) Firefox : 3.6+ Chrome : 4.0+ Safari : 6.0 Opera : 15.0

Browser für Mobilgeräte

iOS Safari : 6.0 Android Browser : 2.1+ Android Chrome : 18.0+

Wenn Sie dies sehen, können Sie im Grunde das Problem lösen, auf das ich dieses Mal gestoßen bin:

Nach der Lösung des Problems stellt sich eine neue Frage. Gibt es neben dem Durchdringen der äußeren Maske durch Mausklicks noch weitere gängige Anwendungsszenarien poniter-events ?

In Anbetracht der Auswirkung none “-Werts sollte es möglich sein, das Klickverhalten des Ereignisses abzubrechen. Beispiel: Machen Sie den A-Label-Link nicht anklickbar, vermeiden Sie mehrere Klicks auf eine Schaltfläche, wiederholtes Absenden von Formularen usw. Darüber hinaus gibt es sicherlich noch viele weitere Einsatzmöglichkeiten, die sich über Attributwerte entdecken lassen.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von CSS-Attributen zum Blockieren von Mausereignissen (Mausklicks können obere Elemente durchdringen). Weitere relevante CSS-Attribute zum Blockieren von Mausereignissen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!