How to simulate a hold click on a button class

user_13575583 0
Viewed 1137

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 seconds instead of just letting it go?

sample code

<!DOCTYPE html>
<html>
<body>

<button class="button" id="button">You released the mouse button.</p>

<script>
document.getElementById("button").onmousedown = function() {mouseDown()};
document.getElementById("button").onmouseup = function() {mouseUp()};

function mouseDown() {
  document.getElementById("button").innerHTML = "The mouse button is held down.";
}

function mouseUp() {
  document.getElementById("button").innerHTML = "You released the mouse button.";
}
</script>

</body>
</html>
jquery javascript
1 Answers

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").addEventListener('mousedown', mouseDown);
document.getElementById("button").addEventListener('mouseup', mouseUp);

function mouseDown() {
  document.getElementById("button").innerHTML = "The mouse button is held down.";
}

function mouseUp() {
  document.getElementById("button").innerHTML = "You released the mouse button.";
}


// bind click event on simulate button
document.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/
function simulateMouseEvent(el, eventName){
  let event;
  if (window.MouseEvent && typeof window.MouseEvent === 'function') {
    event = new MouseEvent(eventName);
  } else {
    event = document.createEvent('MouseEvent');
    event.initMouseEvent(eventName);
  }

  el.dispatchEvent(event);
}
<!DOCTYPE html>
<html>
<body>

  <p>
    <button class="button" id="button">You released the mouse button.</button>
  </p>

  <p>
    <button class="simulate">simulate</button>
  </p>

</body>
</html>

user_35885840
Related