Behandeln Sie das HOVER -Ereignis und die Eingabeaufforderungsinformationsanzeige der Schaltfläche HTML Deaktiviert

In diesem Artikel werden die Strategie der Implementierung von Schwebeverträgen und der Anzeige der zugehörigen Eingabeaufforderungen in HTML für deaktivierte Schaltflächen (deaktivierte Attribute) erläutert. Herkömmliche CSS -Selektoren und JavaScript -Ereignishörer sind aufgrund der Einschränkungen der Browser -Ereignisse bei deaktivierten Elementen häufig ungültig. Das Tutorial analysiert diese Einschränkungen in der Tiefe und liefert zwei effektive Lösungen: Einer besteht darin, den deaktivierten Status der Taste zu simulieren, um native Einschränkungen zu umgehen, und der andere besteht darin, externe Container als Ereignisauslöserziele zu verwenden. Der Artikel enthält detaillierte Codebeispiele und Überlegungen zur Zugänglichkeit, mit denen Entwickler in komplexen Szenarien eine freundliche Benutzerinteraktion erreichen können.

In der Webentwicklung müssen wir den Benutzern häufig ein sofortiges Feedback geben, z. B. zusätzliche Eingabeaufforderungsinformationen, wenn die Maus über ein Element schwebt. Das Implementieren dieser Funktion hat jedoch einige Herausforderungen, wenn das Zielelement eine Schaltfläche mit einem deaktivierten Attribut ist. In diesem Tutorial werden einfache Ansätze ausfallen und zuverlässige Alternativen liefern.

Warum ist die direkte Methode ungültig?

Wenn ein HTML -Element auf den deaktivierten Status eingestellt ist, verhindert der Browser, dass das Element die meisten Benutzer -Interaktionsereignisse auslöst, einschließlich Mausereignissen (wie Mausover, Mausout, Hover usw.) und Tastaturereignissen. Dies dient hauptsächlich dafür, dass sich das behinderte Element im Einklang mit seinen Erwartungen verhält: Es ist nicht interaktiv.

Im ursprünglichen Versuch ausprobierte der Benutzer zwei gängige Methoden:

1. CSS benachbarter Bruder Selector () : Der benachbarte Bruder -Selektor von CSS (Selector1 Selector2) wird nur wirksam, wenn Selector2 unmittelbar nach Selektor1 als Geschwisterelement ist. Wenn zwei Elemente in der DOM -Struktur weit voneinander entfernt sind oder andere Elemente zwischen ihnen gibt, kann der Selektor keine Assoziation herstellen.

    #DeletManagerWarning {
     Anzeige: Keine;
     Farbe: Rot;
     float: rechts;
   }
   
   /* #DisabledCloseBtn: Hover #DeletManagerWarning ist nur dann gültig, wenn beide sofort benachbart sind*/
   #DisabledCloseBtn: Hover #DeletManagerWarning {
     Anzeige: Block;
   }

   In praktischen Anwendungen sind schnelle Nachrichten (z. B. #DeletManagerWarning) in der Regel nicht sofort an der Schaltfläche deaktiviert, sodass diese Methode in den meisten Fällen ungültig ist.

2. JQuery Hover -Event : Obwohl JQuery bequeme Schwebemethoden für den Umgang mit Mauseintrags- und Abfahrtsveranstaltungen bietet, ist es im Wesentlichen eine Kapselung basierend auf nativen DOM -Ereignissen. Aufgrund von Browserbeschränkungen auslöst die deaktivierte Taste keine Mausereignisse, sodass diese Ereignisse nicht selbst mit JQuery gefangen werden können.

    $ (Dokument) .Ready (function () {
     $ ("#disabledCostntn"). Hover (function () {
       // Der Code hier wird nicht ausgeführt, da die Schaltfläche "Deaktivieren" nicht das Hover -Ereignis $ auslöst ("#DeleteManagerWarning"). CSS ("Anzeige", "Block");
     });
   });

   Das folgende Beispiel zeigt, dass das JQuery -Hover -Ereignis ordnungsgemäß funktioniert, wenn die Schaltfläche nicht deaktiviert ist :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.13/jquery.min.js"> </script>
   <styles>
     #DeletManagerWarning {Display: Keine; Farbe: Rot; }
   
   <div>
     <button type="sure" class="btn-close" id="enabledCloseBtn" name="enabledClosebtn" aria-label="close">
       Aktivierte Schaltfläche
     </button>
   </div>
   <div>
     <span id="DeleteManagerWarning"> Diese Nachricht wird angezeigt, wenn die Taste aktiviert ist. </span>
   </div>
   <script>
     $ (Dokument) .Ready (function () {
       $ ("#enabledSclosebtn"). Hover (function () {
         $ ("#DeleteManagerWarning"). CSS ("Display", "Block");
       }, function () {
         $ ("#DeleteManagerWarning"). CSS ("Display", "keine");
       });
     });
   </script></styles>

   Wenn die Schaltfläche jedoch deaktiviert ist , fällt der gleiche JQuery -Code fehl:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.13/jquery.min.js"> </script>
   <styles>
     #DeletManagerWarning {Display: Keine; Farbe: Rot; }
   
   <div>
     <button type="sure" class="btn-close" id="disabledCloseBtn" name="disabledClosebtn" deaktiviert aria-label="close">
       Schaltfläche Bemerkung
     </button>
   </div>
   <div>
     <span id="DeleteManagerWarning"> Diese Nachricht sollte angezeigt werden, aber nicht. </span>
   </div>
   <script>
     $ (Dokument) .Ready (function () {
       $ ("#disabledCostntn"). Hover (function () {
         // Taste deaktivieren wird dieses Ereignis nicht auslösen $ ("#DeleteManagerWarning"). CSS ("Anzeige", "Block");
       }, function () {
         $ ("#DeleteManagerWarning"). CSS ("Display", "keine");
       });
     });
   </script></styles>

Lösung

Um das Problem zu lösen, dass die Disable -Taste kein Hover -Ereignis auslösen kann, können wir die folgenden zwei Hauptstrategien anwenden:

Richtlinie 1: Simulieren Sie den deaktivierten Status der Schaltfläche

Die Kernidee dieses Ansatzes besteht darin, das native Attribut für deaktivierte Behinderungen nicht zu verwenden , sondern die deaktivierten visuellen Effekte der Taste über CSS zu simulieren und sein Verhalten über JavaScript zu steuern (z. B. Klick -Ereignisse). Auf diese Weise kann die Taste immer noch ein Mausereignis auslösen, sodass wir den Schweber hören können.

1. Entfernen Sie deaktiviertes Attribut : Entfernen Sie deaktiviertes Attribut von der HTML -Taste.
2. CSS-Klasse hinzufügen : Fügen Sie der Taste eine benutzerdefinierte CSS-Klasse (z. B. Behinderung oder inaktiv) hinzu, um den visuellen Stil zu definieren, wenn er deaktiviert ist (z. B. Reduzierung der Opazität, Ändern des Cursors usw.).
3. JavaScript -Ereignishandhabung : Verwenden Sie JavaScript (z. B. JQuery), um das Schwebereignis der Schaltfläche anzuhören und die Anzeige und das Verstecken von schnellen Informationen zu steuern. Gleichzeitig muss das Standard -Klickverhalten der Schaltfläche blockiert werden (falls es weiterhin geklickt werden kann).

Beispielcode:

 

<kopf>
<meta charset="utf-8">
<meta name="viewPort" content="width = Gerätebreite, initial-scale = 1,0">
<title> Simulation der Schaltfläche Deaktivieren Sie die Schaltfläche 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.13/jquery.min.js"> </script>
<styles>
  #DeletManagerWarning {
    Anzeige: Keine;
    Farbe: Rot;
    float: rechts; /* ist beispielsweise nur, kann gemäß dem Layout*/angepasst werden
    Rand: 10px;
  }

  /* CSS -Stil, der den behinderten Zustand simuliert*/
  .Dialabled-fake {
    Deckkraft: 0,5; /* Reduzieren Sie die Deckkraft, damit es deaktiviert wird*/
    Cursor: nicht verurteilt; /* Mauscursor wird zu einem verbotenen Symbol*/
    Zeiger-Events: Auto; /* Stellen Sie sicher, dass das Mausereignis*///
  }

  /* Stellen Sie sicher
  .BTN-Wrapper: Hover #DeletManagerWarning {
    Anzeige: Block;
  }




<div class="btn-wrapper">
  <button type="subieren" class="btn-cllose deaktiviert-fake" id="fakedisabledBtn" name="fakedisabledBtn" aria-label="close">
    Schließen (gefälschte behindert)
  </button>
</div>

<div style="margin-top: 20px;">
  <p> Ein Dummy -Inhalt ... </p>
  <span id="DeleteManagerWarning"> diesen Manager nicht löschen! </span>
</div>

<script>
  $ (Dokument) .Ready (function () {
    // Hören Sie sich das Hover -Ereignis $ ("#fakedisabledBtn") der simulierten Disable -Taste.Hover (HOVER (
      function () {
        $ ("#DeleteManagerWarning"). CSS ("Display", "Block"); // Zeigen Sie an, wenn die Maus eingeht},
      function () {
        $ ("#DeleteManagerWarning"). CSS ("Display", "keine"); // sich verstecken, wenn die Maus verlässt}
    );

    // Blockieren Sie den Klickereignis der simulierten Deaktivierungsschaltfläche $ ("#fakeDisabledBtn"). On ("Click", Funktion (Ereignis) {
      Event.PreventDefault (); // Verhindern Sie die Standard -Verhaltenskonsole.log ("gefälschte Schaltfläche Behindert geklickt, aber die Aktion verhindert.");
    });
  });
</script>


</styles>
</title></kopf>

Das obige ist der detaillierte Inhalt vonBehandeln Sie das HOVER -Ereignis und die Eingabeaufforderungsinformationsanzeige der Schaltfläche HTML Deaktiviert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!