首頁猿問如何模擬按住按鈕類的點擊

如何模擬按住按鈕類的點擊

JavaScript

慕少森 2023-03-24 16:13:34

我如何模擬按住單擊按鈕？我可以在哪里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>

查看完整描述

1 回答

躍然一笑

TA貢獻1826條經驗獲得超6個贊

您可以創建事件，當然也可以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>

反對回復 2023-03-24

1 回答
0 關注
110 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何模擬按住按鈕類的點擊

如何模擬按住按鈕類的點擊

1 回答

添加回答