JavaScript 点击事件:一个按钮触发另一个按钮

简介: 给按钮 2 添加点击事件 click 触发按钮 1 的点击事件,就算给按钮 1 添加样式 display: none; 或 visibility: hidden; 隐藏起来也能触发。
+关注继续查看

案例

通过按钮 Click 触发按钮 Wait,弹出信息 Amazing!

<input type="button" value="Wait" id="WaitEle" onclick="javascript:alert('Amazing!');">
<input type="button" value="Click" id="ClickEle" onclick="Go();">

<script>
    var WaitEle = document.getElementById("WaitEle");
    var ClickEle = document.getElementById("ClickEle");
    function Go() {
        WaitEle.onclick();
    }
</script>

补充解释

给按钮 2 添加点击事件 click 触发按钮 1 的点击事件,就算给按钮 1 添加样式 display: none;visibility: hidden; 隐藏起来也能触发。

<button type="button" id="btn1" onclick="alert('我是按钮 1 的弹框')" >按钮 1</button>
<button type="button" id="btn2">按钮 2</button>
<script type="text/javascript">
    const BTN1 = document.getElementById('btn1');
    const BTN2 = document.getElementById('btn2');
    // 给按钮 2 添加点击事件
    BTN2.addEventListener('click', () => {
        BTN1.onclick(); // 按钮 2 点击后触发按钮 1 的 `onclick`
        // BTN1.click(); // 按钮 2 点击后触发按钮 1 的 `click`,效果一样
    });
</script>

版权声明

本博客所有的原创文章,作者皆保留版权。转载必须包含本声明,保持本文完整,并以超链接形式注明作者后除和本文原始地址:https://blog.mazey.net/602.html

历史版本

  1. JavaScript点击事件/一个按钮触发另一个按钮 2017-03-20

(完)

目录
相关文章
|
10天前
|
JavaScript
js点击按钮向左侧滑动效果
js点击按钮向左侧滑动效果
|
11天前
|
JavaScript
js左划出现删除按钮,右滑隐藏demo效果示例(整理)
js左划出现删除按钮,右滑隐藏demo效果示例(整理)
js左划出现删除按钮,右滑隐藏demo效果示例(整理)
|
1月前
|
JavaScript 前端开发
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
28 0
|
2月前
|
前端开发 JavaScript
js实现多种按钮
js实现多种按钮
22 0
|
2月前
|
JavaScript 前端开发
javascript全屏按钮
javascript全屏按钮
24 0
|
2月前
|
JavaScript
js小功能(复制按钮)
js小功能(复制按钮)
20 0
|
2月前
|
JavaScript
js-防止按钮重复点击
js-防止按钮重复点击
|
5月前
|
JavaScript 前端开发
odoo 通过Javascript显示或隐藏form自带按钮
odoo 通过Javascript显示或隐藏form自带按钮
61 0
|
5月前
JavaScript-全选按钮的勾选
JavaScript-全选按钮的勾选
29 0
|
9月前
|
JavaScript BI 数据库
FineReport 使用JS实现决策报表对数据库更新(自动更新,不用点击按钮)
数据库中部分表数据按照一段时间需要更新(如:每个月更新一次),这样数据库中的数据相关数据的部分值是相同的,需要让每一个月的月份更新后,数据库中其他表对应的关系也自动更新,这里介绍相关操作方法。
574 0
FineReport 使用JS实现决策报表对数据库更新(自动更新,不用点击按钮)
相关产品
云迁移中心
推荐文章
更多