如何让一个按钮自动触发,自动执行onclick鼠标单击事件. 默认已点击.
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让一个按钮自动触发,自动执行onclick鼠标单击事件. 默认已点击.相关的知识，希望对你有一定的参考价值。
参考技术A按钮自动触发onclick事件，可以使用定时器setInterval()方法实现。默认已点击，可以在加载网页的时候使用onload方法实现一次点击。
以下例子，实现网页打开时默认弹出弹窗，在关闭弹窗后，每2秒钟自动点击一次弹出弹窗，完整的代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自动点击例子</title>
</head>
<body onload="alert('这是默认点击弹窗')">
<script type="text/javascript">
setInterval(function()
if(document.all)
document.getElementById("buttonid").click();
else
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("buttonid").dispatchEvent(e);
, 2000);
</script>
<input id="buttonid" type="button" value="按钮" onclick="alert('这是自动点击弹窗')" />
<style type="text/css">
inputbackground:red;color:#fff;padding:10px;margin:20px;
</style>
</body>
</html>
运行代码后，效果如下：
一、打开网页，默认点击，如下图
二、每隔2秒钟，自动点击一次，如下图：
扩展资料：
定时器setInterval()方法实现不间断点击，使用settimeout()方法可以实现一次点击后停止自动点击
完整代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自动点击例子</title>
</head>
<body onload="alert('这是默认点击弹窗')">
<script type="text/javascript">
settimeout(function()
if(document.all)
document.getElementById("buttonid").click();
else
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("buttonid").dispatchEvent(e);
, 2000);
</script>
<input id="buttonid" type="button" value="按钮" onclick="alert('这是自动点击弹窗')" />
<style type="text/css">
inputbackground:red;color:#fff;padding:10px;margin:20px;
</style>
</body>
</html>
如何在 ReactJS Typescript 中 2 分钟后自动发生 onclick
【中文标题】如何在 ReactJS Typescript 中 2 分钟后自动发生 onclick【英文标题】：How to make an onclick automatically happen after 2 minutes in ReactJS Typescript 【发布时间】：2022-01-16 15:20:49 【问题描述】：我打算在 2 分钟后自动制作一个按钮 onClick 功能。这是我当前的按钮，我正在调用的函数是处理事件视频。
如何触发按钮在 2 分钟后自动单击。我计划创建一个新函数并在那里调用handleEventVideos()，然后将该函数传递给useEffect。但这不起作用。谁能帮助我如何做到这一点？
<Button
disabled=isDisable
type="submit"
onClick=() => handleEventVideos()
variant="contained"
className=classes.doneButton
>
Done
</Button>
【问题讨论】：
您可以使用 setTimeout() 函数在 2 分钟后自动触发 语法： setTimeout(function() alert("Hello"); , 3000); 【参考方案1】：如果您想在您的示例中调用 onclick 函数，您可以使用 setTimeout 并调用 handleEventVideos 函数。应该是这样的：
document.addEventListener('DOMContentLoaded', function()
setTimeout(()=>
alert("your function of interest!")
,2000);
);
但是，如果您的函数中不需要事件变量（如您在此处的示例），则会出现这种情况。但是，如果您想通过定义 ref 并调用其 click 函数来调用 react click 事件。您可以在此处找到扩展解决方案： How to manually trigger click event in ReactJS? 如果您想以 2 秒的延迟调用它，您只需要以与上面相同的方式使用 setTimeout 函数。
【讨论】：
你的意思是这样吗？document.addEventListener('DOMContentLoaded', function() setTimeout(() => handleEventVideos(); , 1000); );
是的，这是我在帖子中提到的第一种方法。一秒后执行。
我试过了。但它不会自动执行。我也尝试了参考，但对于打字稿它显示错误。
这里是一个沙箱链接来说明第一种方法。：codesandbox.io/s/method1-qz8tm 我很快就会发送另一个链接来说明第二种方法。
这里是第二种方法的链接：codesandbox.io/s/method2-7tpio?file=/src/App.js【参考方案2】：
此警报将在 2 分钟后弹出。你可以把警报代替 你的 onclick 函数在那里。
const OnClick =()=>
setTimeout(()=>
alert("I will pop up after 2 minutes")
,20000);
);
【讨论】：
以上是关于如何让一个按钮自动触发,自动执行onclick鼠标单击事件. 默认已点击.的主要内容，如果未能解决你的问题，请参考以下文章
如何在 ReactJS Typescript 中 2 分钟后自动发生 onclick