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 相关文章推荐
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
js 代码优化点滴记录
Feb 19 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
JS控制表单提交的方法
Jul 09 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
webpack的tree shaking的实现方法
Sep 18 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
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
python中的字典操作及字典函数
2018/01/03 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
python求前n个阶乘的和实例
2020/04/02 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
学生评语集锦
2015/01/04 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
python OpenCV学习笔记
2021/03/31 Python
Django 如何实现文件上传下载
2021/04/08 Python
Django框架中视图的用法
2022/06/10 Python