Disabled Button

No mouse events are triggered on a disabled button

by th3uiguy

HTML

<div class="leftCol">
  <span id="buttonWrapper">
    <button type="button" id="buttonEl">
      Hover Here
    </button>
  </span>
</div>

<form style="display:inline-block;">
  <label>
    <input id="checkboxEl" type="checkbox">
    Disable Button
  </label>

  <div>
    <textarea name="textAreaEl" id="textAreaEl" cols="50" rows="25"></textarea> 
  </div>
  
  <button type="button" id="clearBtn">Clear</button>
</form>

CSS

.leftCol{
  display:inline-block;
  width: 200px;
  text-align:center;
  vertical-align:top;
}

#buttonEl{
  pointer-events: none;
}

JavaScript

$('#buttonEl').on('click mouseover mouseenter mouseleave mouseout', 
  function(ev){
    log("buttonEl-" + ev.type);
  }
);
$('#buttonWrapper').on('click mouseover mouseenter mouseleave mouseout', 
  function(ev){
    log("buttonWrapper-" + ev.type);
  }
);

function log(message){
	$('#textAreaEl')[0].value += message + " ";
}

$('#checkboxEl').on('click', function(){
	$('#buttonEl')[0].disabled = this.checked;
});
$('#clearBtn').on('click', function(){
	$('#textAreaEl')[0].value = '';
});