How To Simulate A Hold Click On A Button Class
How can i simulate a hold click down onto a button? where i can use elements.[0].click(); to simulate a click, how can I make it so that it would hold down the button for e.g 5 sec
Solution 1:
You can create events and of cause also MouseEvents yourself.
In modern browsers you can just do this by calling the constructor of the needed event type, ore by calling document.createEvent('<EventName>')https://developer.mozilla.org/en-US/docs/Web/API/Event
You can then trigger this event on any element you like using dispatchEvent()https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent
document.getElementById("button").onmousedown = function() {mouseDown()};
document.getElementById("button").onmouseup = function() {mouseUp()};
functionmouseDown() {
document.getElementById("button").innerHTML = "The mouse button is held down.";
}
functionmouseUp() {
document.getElementById("button").innerHTML = "You released the mouse button.";
}
// bind click event on simulate buttondocument.querySelector('.simulate').addEventListener('click', () => {
console.log('start');
simulateMouseEvent(document.getElementById("button"), 'mousedown')
setTimeout(() => {
console.log('end');
simulateMouseEvent(document.getElementById("button"), 'mouseup')
}, 5000)
})
// capsulate the event trigger stuff// see: http://youmightnotneedjquery.com/functionsimulateMouseEvent(el, event){
if (window.MouseEvent && typeofwindow.MouseEvent === 'function') {
var event = newMouseEvent(event);
} else {
var event = document.createEvent('MouseEvent');
event.initMouseEvent(event);
}
el.dispatchEvent(event);
}<!DOCTYPE html><html><body><p><buttonclass="button"id="button">You released the mouse button.</button></p><p><buttonclass="simulate">simulate</button></p></body></html>
Post a Comment for "How To Simulate A Hold Click On A Button Class"