JSFiddle - React, Tailwind, and code Playground
HTML
<div id="button">Click to see result</div>
<div id="result">Button was clicked</div>
<hr>
<button id="jquerySimulateClick">Trigger click with jQuery</button>
<button id="nativeSimulateClick">Trigger click native</button>
<button id="jquerySimulateOverUp">Trigger mouseover + mouseup with jQuery</button>
<button id="nativeSimulateOverUp">Trigger mouseover + mouseup native</button>
CSS
div {
width: 100px;
height: 100px;
text-align: center;
margin-bottom: 14px;
}
#button {
float: left;
background: lightblue;
}
#result {
float: right;
background: red;
display: none;
}
#result.visible {display: block;}
hr {clear: both;}
button {
width: 100%;
margin-top: 20px;
}
JavaScript
var button = document.getElementById("button"),
$btn = $(button),
result = document.getElementById("result"),
noop = function() {},
out = function() {
result.classList.toggle('visible')
};
/* simulate non-clickable button on google */
button.addEventListener('blur', noop);
button.addEventListener('focus', noop);
button.addEventListener('keydown', noop);
button.addEventListener('keypress', noop);
button.addEventListener('keyup', noop);
button.addEventListener('mousedown', noop);
button.addEventListener('mouseout', function() {
console.log('mout');
this.removeEventListener('mouseup', out);
});
button.addEventListener('mouseover', function() {
console.log('mover');
this.addEventListener('mouseup', out);
});
button.addEventListener('mouseup', noop);
$btn.mouseover(noop);
/* trigger click with jQuery */
$("#jquerySimulateClick").click(function() {
$btn.trigger('click');
});
/* trigger click native */
$("#nativeSimulateClick").click(function() {
button.dispatchEvent(new Event('click'));
});
/* trigger mouseover + mouseup with jQuery */
$("#jquerySimulateOverUp").click(function() {
$btn.trigger('mouseover')
.trigger('mouseup')
.trigger('mouseout');
});
/* trigger mouseover + mouseup native */
$("#nativeSimulateOverUp").click(function() {
button.dispatchEvent(new Event('mouseover'));
button.dispatchEvent(new Event('mouseup'));
button.dispatchEvent(new Event('mouseout'));
});