Onmouseover-Ereignis auslösen, wenn Element deaktiviert ist

Lesezeit: 4 Minuten

Benutzer-Avatar
KyleMit

Ich habe einige Steuerelemente, die ich deaktivieren muss, wenn Benutzer keine Bearbeitungsrechte haben, aber manchmal nicht breit genug sind, um den gesamten Text des ausgewählten Optionselements anzuzeigen. In diesem Fall habe ich einen Tooltip mit ASP.NET und dem folgenden Code hinzugefügt

ddl.Attributes.Add("onmouseover", "this.title=this.options[this.selectedIndex].title")

Dies funktioniert, wenn das Steuerelement aktiviert ist, funktioniert jedoch nicht, wenn es deaktiviert ist.

Die folgende Warnung wird nicht ausgelöst, wenn sich eine Maus über dem ausgewählten Element befindet:

<select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
</select>

Sieh dir das an Geige.

Q: Darf ich die feuern onmouseover Ereignis für Steuerelemente, die sind disabled?

  • Deaktivierter Schaltflächenzähler in Fiddle feuert für mich Chrome 93 und Firefox 91. Hier ist mit Warnung (funktioniert in Firefox 91, aber nicht in Chrome 93): jsfiddle.net/7hqL2f1a/1

    – Danronmond

    19. September 2021 um 16:49 Uhr


Benutzer-Avatar
Dr4co

Ich weiß, dass dies ein alter Beitrag ist, aber hoffentlich wird diese Antwort klären, wie @Diodeus Antwort kann umgesetzt werden!

Deaktivierte Elemente lösen keine Ereignisse aus, z. B. können Benutzer nicht mit der Maus darüber fahren oder darauf klicken, um ein Popover (oder einen Tooltip) auszulösen. Als Problemumgehung können Sie jedoch eine Wrapping-Datei verwenden <DIV> oder <span> um das deaktivierte Element herum und hören Sie stattdessen auf das Ereignis, das auf diesem Element ausgelöst wurde.

HINWEIS! Verwenden onmouseover und onmouseout in der Hülle <DIV> funktioniert in Chrome (v69) nicht wie erwartet. Wird aber im IE funktionieren. Aus diesem Grund empfehle ich Benutzern die Verwendung onmouseenter und onmouseleave stattdessen, was sowohl im IE als auch in Chrome hervorragend funktioniert.

   <select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
  </select>

  <div onmouseenter="alert('hi');">
    <select disabled="disabled" onmouseover="alert('hi');">
      <option>Disabled with wrapper</option>
    </select>
  </div>

Ich habe hier eine JS-Geige mit einigen Beispielen zusammengestellt: http://jsfiddle.net/Dr4co/tg6134ju/

  • Vielen Dank für das Hinzufügen dieser Antwort. In der neuesten Chrome-Version onmouseenter funktionierte als Ersatz für onmouseover mit disabled Kinder aber onmouseleave funktionierte nicht als Ersatz für onmouseout. Wegen des onmouseleave Problem, ich musste noch ein hinzufügen ::before Pseudo-Element für den Wrapper, der über dem positioniert ist disabled Kind um zu bekommen onmouseover oder onmouseleave kündigen.

    – Gregor Venech

    5. Mai 2021 um 14:19 Uhr

dafür gibt es zwei lösungen

<Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

oder dieses, wenn Sie die Aussicht nicht verpassen möchten

<Tooltip title="Tooltip" placement="bottom">
  <IconButton component="div" disabled>
    <Done />
  </IconButton>
</Tooltip>

Hinweis

  • Es sollte beachtet werden, dass es immer noch eine tote Zone über dem deaktivierten Element selbst gibt. Wenn der Wrapper einen Blockstil hat, wird der Effekt unregelmäßig sein; Wenn es einen Inline-Stil hat, darf die Maus niemals einen Teil davon passieren, um den Effekt auszulösen. Ein Z-Index-Überlagerungselement würde sich konsistenter verhalten, würde jedoch das Einfügen eines gleichgeordneten Elements mit absoluter Positionierung relativ zum Wrapper erfordern.

    – Nathan Williams

    21. März 2017 um 13:15 Uhr

Benutzer-Avatar
Andres Zapata

Ich weiß, dass dies ein alter Beitrag ist, aber in Chrome können Sie CSS-Eigenschaftenzeiger-Ereignisse auf alle setzen und es sollte Ereignisse zulassen. Andere Browser habe ich nicht überprüft.

button[disabled] {
  pointer-events: all;
}

Bearbeiten:

Eigentlich denke ich, dass es ausreicht, die Eigenschaft auf auto zu setzen. Wie @KyleMit kommentierte, ist die Unterstützung ziemlich gut.

Ich habe dies gerade in einem Projekt verwendet, in dem ich eine Schaltfläche deaktivieren musste, bis einige Validierungsregeln erfüllt waren, aber ich musste auch die Validierung auslösen, wenn Sie mit der Maus über die Schaltfläche fahren. Das Hinzufügen der Zeigerereignisse hat also funktioniert. Ich denke, es ist der einfachste Weg, das im OP angegebene Problem zu lösen.

  • Das funktioniert bei mir überhaupt nicht, ob ich das verwende all oder auto.

    – Christian Jensen

    15. Oktober 2020 um 19:29 Uhr

Benutzer-Avatar
Justin

Warum können Sie dem Zielelement keinen Titel hinzufügen? Der Titel sieht genauso aus wie der Tooltip. Und Titel funktioniert bei deaktivierten Elementen.

Wenn Sie den Wert Ihrer Auswahl festlegen, legen Sie auch den Titel fest:

element.value=value;
element.title = element.options[element.selectedIndex].text;

  • Das funktioniert bei mir überhaupt nicht, ob ich das verwende all oder auto.

    – Christian Jensen

    15. Oktober 2020 um 19:29 Uhr

1005940cookie-checkOnmouseover-Ereignis auslösen, wenn Element deaktiviert ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy