JS模拟按钮点击功能的方法


Posted in Javascript onDecember 22, 2015

本文实例讲述了JS模拟按钮点击功能的方法。分享给大家供大家参考,具体如下:

<html>
 <head>
  <title>usually function</title>
 </head>
 <script>
 function load(){
  //下面两种方法效果是一样的
  document.getElementById("target").onclick();
  document.getElementById("target").click();
 }
 function test(){
  alert("test");
 }
</script>
 <body onload="load()">
  <button id="target" onclick="test()">test</button>
 </body>
<html>

备注:

btnObj.click()是真正地用程序去点击按钮,触发了按钮的onclick()事件

btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法,只是调用方法而已,并未触发事件

补充:

javascript模拟鼠标点击a便签的例子

这里先获取a标签元素,然后后面.click()即可.

代码如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<a href="这里是a标签的路径">这里是a标签的名称</a>
<button onclick="fn()">点击打开a标签</button>
<script>
  var a = document.getElementsByTagName('a')[0];
  function fn(){
    a.click();
  }
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
vue之将echart封装为组件
Jun 02 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 #Javascript
js实现仿微博滚动显示信息的效果
Dec 21 #Javascript
Javascript实现Array和String互转换的方法
Dec 21 #Javascript
图解Sublime Text3使用技巧
Dec 21 #Javascript
七个不允许错过的jQuery小技巧
Dec 21 #Javascript
jQuery焦点图插件SaySlide
Dec 21 #Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 #Javascript
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
js对象的复制继承实例
2015/01/10 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
js实现抽奖效果
2017/03/27 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python fileinput模块使用实例
2015/05/28 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python对csv文件追加写入列的方法
2019/08/01 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
室内设计专业学生的自我评价分享
2013/11/27 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
新闻稿件写作范文
2015/07/18 职场文书