Onmouseover-Ereignis auslösen, wenn Element deaktiviert ist

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?

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/

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

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.

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;