Enable onMouseOut for disabled elements in the html

Question

In react-rails, the onMouseOut event works only if the element is not disabled.

Following is the code in the render method:

dom.button
        type: 'submit'
        'data-toggle': "popover"
        title: "Form Requirements"
        'data-content': 'Please fill in all the form fields before submitting this form'
        'data-placement': "bottom"
        className: 'btn btn-primary'
        disabled: !@valid()
        onMouseEnter: @showPopOver
        onMouseOut: @hidePopOver
        'Create admin'

The corresponding methods called are shown below:

showPopOver: function() {
  if (!this.valid()) {
    return $('[data-toggle="popover"]').popover('show');
  }
},
hidePopOver: function() {
  return $('[data-toggle="popover"]').popover('destroy');
},

score 0 · Answer 1 · answered Mar 17 '16 at 08:03

0

This is how HTML works. No events for disabled elements. You'll have to make it "appear" to be disabled by other means if you want the events to trigger.

answered Mar 17 '16 at 08:03

Ted Nyberg

7,001
7
41
72

but onMouseEnter event works, then why onMouseOut doesn't. and this event works on firefox – Vipin Verma Mar 17 '16 at 08:05

Enable onMouseOut for disabled elements in the html

1 Answers1