javascript - 如何模拟对按钮类的按住单击
问题描述
如何模拟按住按钮单击?我可以elements.[0].click();
用来模拟点击的地方,我怎样才能让它按住按钮例如 5 秒而不是放开它?
示例代码
<!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>
解决方案
你可以自己创造事件,当然也可以MouseEvents
自己创造。
在现代浏览器中,您可以通过调用所需事件类型的构造函数来执行此操作,或者通过调用document.createEvent('<EventName>')
https://developer.mozilla.org/en-US/docs/Web/API/Event
然后,您可以使用https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent在您喜欢的任何元素上触发此事件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>
推荐阅读
- java - Spring Boot中的Spring安全配置不适用于管理员角色
- visual-studio-code - 在 vscode 终端中显示 conda 环境
- sql - SQL中多列中的多个过滤器
- actionscript-3 - ActionScript 3 当您将鼠标移动到某个方向时按下一个键
- ssl-certificate - 别名的 SSL(域指针)
- typescript - 为什么可以在打字稿中合并两个 const 枚举?
- r - 具有几个值的图例
- kotlin - 春季测试 Kotlin Hamescreat 有匹配器
- rust - 如何使用 rust-polars 读取压缩的 TSV 文件 (*.gtf.gz)?
- reactjs - Reactjs &Typescript:如何显示 API 调用的结果?