Activar evento onmouseover cuando el elemento está deshabilitado

6 minutos de lectura

Activar evento onmouseover cuando el elemento esta deshabilitado
KyleMit

Tengo algunos controles que necesito deshabilitar cuando los usuarios no tienen privilegios de edición, pero a veces no son lo suficientemente amplios para mostrar el texto completo del elemento de opción seleccionado. En cuyo caso, he agregado una información sobre herramientas con ASP.NET y el siguiente código

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

Esto funciona cuando el control está habilitado, pero no funciona cuando está deshabilitado.

La siguiente alerta no se activará cuando el mouse esté sobre el elemento seleccionado:

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

Mira esto violín.

q: ¿Puedo disparar el onmouseover evento para los controles que son disabled?

  • El contador de botones deshabilitado en Fiddle me está disparando Chrome 93 y Firefox 91. Aquí está una alerta (funciona en Firefox 91 pero no en Chrome 93): jsfiddle.net/7hqL2f1a/1

    – danronmoon

    19 sep 2021 a las 16:49


Activar evento onmouseover cuando el elemento esta deshabilitado
Diodeo – James MacFarlane

Los elementos deshabilitados no activan eventos, por ejemplo, los usuarios no pueden desplazarse o hacer clic en ellos para activar una ventana emergente (o información sobre herramientas). Sin embargo, puede envolver el elemento deshabilitado con un DIV y escuche el evento disparado en ese elemento en su lugar.

  • podrías por favor demostrar

    – mikewasmike

    7 junio 2017 a las 16:57

  • Parece que si el elemento deshabilitado ocupa el 100% del div, incluso esto no funcionará

    – Michael S. Miller

    7 febrero 2020 a las 15:41

  • Haga esto y use “mouseenter” en lugar de “mouseover” y funcionará.

    – Petra1999

    28 de octubre de 2020 a las 19:17

  • El problema es que pierde el cursor HTML ‘no permitido’ y el cursor del puntero una vez que el botón está habilitado

    – Chris rosa

    7 de abril de 2021 a las 8:28

Activar evento onmouseover cuando el elemento esta deshabilitado
KyleMit

Actualizar: Consulte el comentario de Nathan William para conocer algunas limitaciones importantes de este enfoque. He actualizado el violín para ilustrar las áreas problemáticas con mayor claridad.


Ampliando lo que dijo @Diodeus, puede usar jQuery para crear automáticamente el div contenedor para usted y envuélvalo alrededor de los elementos deshabilitados.

  1. Utilizar el :disabled selector para encontrar todos los elementos deshabilitados.
  2. Entonces llame al .wrap() método con una función de devolución de llamada
  3. Puedes usar this para referirse al elemento actual en el conjunto.
  4. Entonces usa .attr() método para obtener el onmouseover valor del elemento principal y aplicar el mismo valor al nuevo div.
$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});

Demostración en jsFiddle

  • Cabe señalar que todavía hay una zona muerta sobre el propio elemento deshabilitado. Si el envoltorio tiene un estilo de bloque, el efecto será errático; si tiene un estilo en línea, es posible que el mouse nunca transite por ninguna parte para activar el efecto. Un elemento de superposición de índice z se comportaría de manera más consistente, pero requeriría insertar un elemento hermano con posicionamiento absoluto en relación con el envoltorio.

    –Nathan Williams

    21 de marzo de 2017 a las 13:15

1647574748 770 Activar evento onmouseover cuando el elemento esta deshabilitado
dr4co

Sé que esta es una publicación anterior, pero espero que esta respuesta aclare cómo @Diodeus ¡La respuesta se puede implementar!

Los elementos deshabilitados no activan eventos, por ejemplo, los usuarios no pueden desplazarse o hacer clic en ellos para activar una ventana emergente (o información sobre herramientas). Sin embargo, como solución temporal, puede envolver un <DIV> o <span> alrededor del elemento deshabilitado y escuche el evento disparado en ese elemento en su lugar.

¡NOTA! Utilizando onmouseover y onmouseout en el envoltorio <DIV> no funcionará como se esperaba en Chrome (v69). Sin embargo, funcionará en IE. Es por eso que recomiendo a los usuarios que usen onmouseenter y onmouseleave en cambio, que funciona muy bien tanto en IE como en Chrome.

   <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>

He reunido un violín JS con algunos ejemplos aquí: http://jsfiddle.net/Dr4co/tg6134ju/

  • Gracias por agregar esta respuesta. En la última versión de Chrome, onmouseenter funcionó como un reemplazo para onmouseover con disabled niños pero onmouseleave no funcionó como un reemplazo para onmouseout. Debido a la onmouseleave problema, todavía tenía que agregar un ::before pseudo-elemento a la envoltura colocada en la parte superior de la disabled niño para conseguir onmouseover o onmouseleave para disparar.

    – Greg Venech

    5 de mayo de 2021 a las 14:19

1647574749 467 Activar evento onmouseover cuando el elemento esta deshabilitado
Andrés Zapata

Sé que esta es una publicación anterior, pero en Chrome puede configurar eventos de puntero de propiedad css para todos y debería permitir eventos. No he comprobado en otros navegadores.

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

Editar:

En realidad, creo que establecer la propiedad en automático es suficiente. Como comentó @KyleMit, el soporte es bastante bueno.

Solo usé esto en un proyecto donde necesitaba deshabilitar un botón hasta que se cumplieran algunas reglas de validación, pero también necesitaba activar la validación al pasar el mouse sobre el botón. Entonces, agregar los eventos de puntero funcionó. Creo que es la forma más fácil de superar el problema establecido en el OP.

¿Por qué no puede agregar un título en el elemento de destino? El título se parece a la información sobre herramientas. Y obras de título sobre elementos deshabilitados.

cuando establezca el valor de su selección, también establezca el título:

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

  • Justin, ese es un camino a seguir (que creo que finalmente podría haber elegido): el problema es que hay muchas selecciones que están deshabilitadas condicionalmente. Necesitaba el mouseover para que el título se actualizara apropiadamente cuando no fue discapacitado. Pero sembrarlo con el título correcto para comenzar cubre ambos casos.

    – KyleMit

    19 de enero de 2016 a las 14:33

  • Para Kylemit, puede agregarle una condición: if(element.classList.contains(“addTitle15”)){ // agregar título

    – Justin

    19 de enero de 2016 a las 14:38


Activar evento onmouseover cuando el elemento esta deshabilitado
Mina Fawzy

hay dos soluciones para esto

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

o este si no quieres perderte la vista

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

referencia

  • Justin, ese es un camino a seguir (que creo que finalmente podría haber elegido): el problema es que hay muchas selecciones que están deshabilitadas condicionalmente. Necesitaba el mouseover para que el título se actualizara apropiadamente cuando no fue discapacitado. Pero sembrarlo con el título correcto para comenzar cubre ambos casos.

    – KyleMit

    19 de enero de 2016 a las 14:33

  • Para Kylemit, puede agregarle una condición: if(element.classList.contains(“addTitle15”)){ // agregar título

    – Justin

    19 de enero de 2016 a las 14:38


¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad