Zeigerereignisse

Artikel zuerst auf persönlichem Blog veröffentlicht

Szenen

Ich bin in einem Firmenprojekt auf eine solche Szene gestoßen: Es gibt ein Produkt (mit Informationen wie Symbol, Preis usw.), wenn das Symbol gehalten wird, sollte ein schwebender Tooltips angezeigt werden, um seine detaillierten Informationen anzuzeigen, wenn das Produkt deaktiviert ist , da ist ein schwarzes Die Maske ist oben bedeckt und kann derzeit nicht ausgewählt werden Dann kommt das Problem: Ich möchte mit der Maus über das Symbol fahren, um die Tooltips anzuzeigen, aber es ist eine schwarze Maske darauf. Was soll ich machen?

Der Code lautet wie folgt (einige Tags wurden entfernt, um zu verhindern, dass der Code zu lang wird):

<style>
  .container {
    width: 500px;
    height: 300px;
    background: red;
    position: relative;
  }
  .mask {
    width: 100%;
    height: 100%;
    background: green;
    position: absolute;
    z-index: 2;
  }
  .content {
    width: 500px;
    height: 300px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="mask"></div>
    <p class="content">我是内容</p>
  </div>

  <script>
    const mask = document.querySelector('.mask');
    const container = document.querySelector('.container');
    const content = document.querySelector('.content');

    content.addEventListener('mouseenter', () => {
      console.log('content mouseenter');
    });
    mask.addEventListener('mouseenter', () => {
      console.log('mask mouseenter');
    });
    container.addEventListener('mouseenter', () => {
      console.log('container mouseenter');
    });
  </script>
</body>
复制代码

Der Effekt ist jetzt jedoch, dass die Druckreihenfolge wie folgt lautet, wenn ich den Mauszeiger nach oben bewege:

// container mouseenter
// mask mouseenter
复制代码

Ich ausgelöstmouseenteraberhabe damals nach Nachdenken immer wieder überlegt, wie man dieses Problem lösen kann. Da ist eine Maske drauf, die musscontentpointer-events

Was sind Pointer-Events?

Werfen wir einen Blick auf seine Definition auf Mdn

Die CSS-Eigenschaft pointer-events gibt an, unter welchen Umständen (falls vorhanden) ein bestimmtes Grafikelement der Auslöser für Mausereignisse sein kann.

Es hat viele Werte:

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

/* Keyword values */
pointer-events: auto;
pointer-events: none;
/* 以下的属性仅适用于SVG */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;
复制代码

Um das obige Problem zu lösen, müssen Sie nur <div class='mask'>eines zum obigen hinzufügen pointer-events: none, werfen wir einen Blick auf die Druckreihenfolge:

// container mouseenter
// content mouseenter
复制代码

Warum? Werfen wir einen Blick auf pointer-events:nonedie Erklärung in der Mdn-Dokumentation:

Elemente werden niemals Auslöser für Mausereignisse. Ein Mausereignis kann jedoch auf ein untergeordnetes Element zeigen, wenn die Eigenschaft pointer-events seines untergeordneten Elements einen anderen Wert angibt. In diesem Fall löst das Mausereignis den Ereignis-Listener des übergeordneten Elements während der Erfassungs- oder Bubbling-Phase aus.

Also haben wir .maskdieses Attribut oben hinzugefügt, es wird nicht zum Auslöser des Mausereignisses, also wird der Auslöser des Mausereignisses erfolgreich zu .content, und dieses Problem wurde erfolgreich gelöst.

Aber wir sehen diese Definition, aber wenn ihr untergeordnetes Element auch dieses Attribut angibt und es nicht none ist, kann das Mausereignis auf ein untergeordnetes Element zeigen, und der Rest wird weggelassen ... Versuchen wir erneut, eine Demo zu schreiben:

<style>
  .mask-child {
    width: 200px;
    height: 300px;
    background: yellow;
    pointer-events: auto;
  }
</style>
<body>
  <div class="container">
    <div class="mask">
      <div class="mask-child"></div>
    </div>
    <p class="content">我是内容</p>
  </div>

  <script>
    const maskChild = document.querySelector('.mask-child');

    maskChild.addEventListener('mouseenter', () => {
      console.log('maskChild mouseenter');
    });
  </script>
</body>
复制代码

Fügen Sie diesen Teil gerade dem Code hinzu, schauen wir uns das noch einmal an, es sollte beachtet werden, dass wir .maskein Kind hinzugefügt .mask-childund dann seine mouseenterEreignisse angehört haben, schauen wir uns den Effekt an:

// container mouseenter
// mask mouseenter
// maskChild mouseenter
复制代码

Wenig überraschend ist es immer noch das gleiche maskEreignis , das ausgelöst mouseenterwird, daher wissen wir, dass wir, wenn Sie das angegebene Ereignis eines Elements überspringen möchten, eines darauf setzen können pointer-events:none, aber es sollte beachtet werden, dass seine Nachkommen keine pointer-eventsAttribute erneut angeben sollten. andernfalls wird es immer noch scheitern.

Beispiel

Löst keine Mausereignisse aus (Ziehen, Bewegen, Klicken usw.).

<style>
  button {
    pointer-events: none;
  }
</style>
<button onclick="handleClick()">测试</button>
<script>
  function handleClick() {
    console.log('handleClick');
  }
</script>
复制代码

druckt handleClick nicht.

Auch wenn es gesetzt ist :hover, wird die :activePseudo-Klasse nicht ausgelöst.

Wenn wir wie zuvor den Effekt eines deaktivierten Elements aufheben wollten hover, könnten wir es so schreiben:

<p class="content disable"></p>

<style>
  .content:not(disable):hover {
  }
</style>
复制代码

Und jetzt können wir es so schreiben, ist es einfacher?

<p class="content disable"></p>

<style>
  .content.disable {
    pointer-events: none;
  }
  .content:hover {
  }
</style>
复制代码

Tatsächlich gibt .disablees wegen der Priorität von CSS unten steht.

<p class="content disable"></p>

<style>
  .content:hover {
    background: black;
  }
  .content.disable {
    background: yellow;
  }
</style>
复制代码

Zusammenfassen

Das Obige ist der gesamte Inhalt dieses Artikels, es ist eine kleine Aufzeichnung für mich, ich hoffe, es kann Ihnen helfen.

Zeichnen Sie eine Verwendung von Zeigerereignissen auf

Zeigerereignisse

Szenen

Was sind Pointer-Events?

Beispiel

Zusammenfassen

Ich denke du magst