如何模拟按住按钮类的点击
[英]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();我可以使用elements.[0].click(); to simulate a click, how can I make it so that it would hold down the button for eg 5 seconds instead of just letting it go?要模拟点击，我怎样才能让它按住按钮 5 秒钟而不是让它离开？
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>
1 个解决方案
解决方案1
0 已采纳 2020-09-25 17:36:00
You can create events and of cause also MouseEvents yourself.您可以自己创建事件，当然也可以创建MouseEvents 。
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在现代浏览器中，您可以通过调用所需事件类型的构造函数来完成此操作，或者通过调用document.createEvent('<EventName>') https://developer.mozilla.org/en-US/docs/Web/API /事件
You can then trigger this event on any element you like using dispatchEvent() https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent然后，您可以使用dispatchEvent() https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent在您喜欢的任何元素上触发此事件
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."; } // 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, event){ if (window.MouseEvent && typeof window.MouseEvent === 'function') { var event = new MouseEvent(event); } else { var event = document.createEvent('MouseEvent'); event.initMouseEvent(event); } 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.