Fire onmouseover event when element is disabled

Question

I have some controls that I need to disable when users don't have edit privileges, but are sometimes not wide enough to show the entire text of the selected option element. In which case I've added a tool tip with ASP.NET and the following code

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

This works when the control is enabled, but doesn't work when it is disabled.

The following alert will not fire when a mouse is over the select element:

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

See this fiddle.

Q: Can I fire the onmouseover event for controls that are disabled?

Disabled button counter in Fiddle is firing for me Chrome 93 and Firefox 91. Here's with alert (works in Firefox 91 but not Chrome 93): http://jsfiddle.net/7hqL2f1a/1/ — danronmoon, Sep 19 '21 at 16:49

score 53 · Accepted Answer · edited Oct 26 '18 at 13:11

53

Disabled elements do not fire events, e.g. users cannot hover or click them to trigger a popover (or tooltip). You can however wrap the disabled element with a DIV and listen to the event fired on that element instead.

edited Oct 26 '18 at 13:11

Dr4co

105
1
7

answered Aug 07 '13 at 21:16

Diodeus - James MacFarlane

112,730
33
157
176

3

could you please demonstrate – mikewasmike Jun 07 '17 at 16:57
15

It appears that if the disabled element takes up 100% of the div, even this won't work – Michael S. Miller Feb 07 '20 at 15:41
2

Do this and use "mouseenter" instead of "mouseover" and it will work. – Petra1999 Oct 28 '20 at 19:17
Trouble is you lose the HTML 'not-allowed' cursor snf the pointer cursor once the button is enabled – Chris Pink Apr 07 '21 at 08:28
As a comment: The [W3C HTML5 spec](https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#concept-fe-disabled) states, that `click` events are disabled. Vendors treat other events differently. Firefox, for example, seems to trigger some events like mouseEnter. – Janis Jansen Nov 14 '22 at 18:23

score 10 · Answer 2 · edited May 23 '17 at 12:09

10

Update: Please see nathan william's comment for some serious limitations to this approach. I've updated the fiddle to illustrate the problem areas more clearly.

Expanding on what @Diodeus said, you can use jQuery to automatically create the div container for you and wrap it around any disabled elements.

Use the :disabled selector to find all disabled elements.
Then call the .wrap() method with a function callback
You can use this to refer to the current element in the set.
Then use .attr() method to get the onmouseover value from the parent element and apply the same value to the new div.

$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});

Demo in jsFiddle

edited May 23 '17 at 12:09

Community

1
1

answered Aug 07 '13 at 22:12

KyleMit

30,350
66
462
664

4

Should be noted that there's still a dead zone over the disabled element itself. If the wrapper has block style, then the effect will be erratic; if it has inline style, then the mouse may never transit any part of it to trigger the effect. A z-index overlay element would behave more consistently, but would require inserting a sibling element with absolute positioning relative to the wrapper. – Nathan Williams Mar 21 '17 at 13:15

Dr4co · Answer 3 · 2018-10-26T12:01:36.097

I know this is an old post, but hopefully this answer will clarify how @Diodeus answer can be implemented!

Disabled elements do not fire events, e.g. users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you can however wrap a <DIV> or <span> around the disabled element and listen to the event fired on that element instead.

NOTE! Using onmouseover and onmouseout in the wrapper <DIV> will not work as expected in Chrome (v69). But will however work in IE. Which is why I recommend users to use onmouseenter and onmouseleave instead, which is working great both in IE and in 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>

I've put together a JS fiddle with some examples here: http://jsfiddle.net/Dr4co/tg6134ju/

Thanks for adding this answer. In the latest version of Chrome, `onmouseenter` did work as a replacement for `onmouseover` with `disabled` children but `onmouseleave` did not work as a replacement for `onmouseout`. Due to the `onmouseleave` issue, I still had to add a `::before` pseudo-element to the wrapper positioned on top of the `disabled` child in order to get `onmouseover` or `onmouseleave` to fire. — Greg Venech, May 05 '21 at 14:19

score 4 · Answer 4 · answered May 15 '23 at 14:07

4

For modern browsers, you can use the pointerenter and pointerleave events instead. These fire even if the HTML Element is disabled.

answered May 15 '23 at 14:07

Erik Živković

4,867
2
35
53

This is right answer for disabled element to fire the event. – Varadha Raj Jun 02 '23 at 05:55
True! But before the year 2018, both Safari and Firefox did not have support for `pointerenter` and `pointerleave`. Back then it was better to use [mouseenter](https://caniuse.com/?search=mouseenter%20) or [mouseleave](https://caniuse.com/?search=mouseleave) =) – Dr4co Jun 07 '23 at 09:19

score 1 · Answer 5 · answered Jan 19 '16 at 14:28

1

Why can't you add a title on the target element? title looks like the same as tool tip. And title works on disabled elements.

when you set the value of your select, also set title:

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

answered Jan 19 '16 at 14:28

Justin

1,050
11
26

Justin, that's one way to go (which I think I might have ultimately gone with) - the problem is that there are a lot of selects that are conditionally disabled. I needed the mouseover so the title would update appropriately when it *wasn't* disabled. But seeding it with the correct title to start covers both cases. – KyleMit Jan 19 '16 at 14:33
To Kylemit, then you can add condition for it: if(element.classList.contains("addTitle15")){ // add title – Justin Jan 19 '16 at 14:38

Andres Zapata · Answer 6 · 2016-12-30T18:51:33.690

1

I know this is an old post, but in chrome you can set css property pointer-events to all and it should allow for events. I haven't checked in other browsers.

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

Edit:

Actually I think setting the property to auto is sufficient. As @KyleMit commented, support it's pretty good.

I just used this in project where I needed to disable an button until some validation rules where met, but I also needed to trigger the validation on hover over the button. So adding the pointer-events did the trick. I think it's the easiest way get over the problem stated in the OP.

edited Dec 30 '16 at 18:51

answered Dec 30 '16 at 17:34

Andres Zapata

1,710
1
16
32

9

This does not work at all for me, whether I use `all` or `auto`. – Christian Jensen Oct 15 '20 at 19:29

score -1 · Answer 7 · answered Jul 23 '19 at 21:37

there are two solutions for this

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

or this one if you dont want miss the view

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

reference

Fire onmouseover event when element is disabled

7 Answers7

Demo in jsFiddle

Linked

Related