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 仿QQ滑动菜单效果代码
Sep 03 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
再谈JavaScript线程
Jul 10 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
浅析JavaScript中的变量提升
Jun 01 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安全编程之加密功能
2006/10/09 PHP
使用数据库保存session的方法
2006/10/09 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
python爬虫爬取某站上海租房图片
2018/02/04 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
详解【python】str与json类型转换
2019/04/29 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
最常使用的求职信
2014/05/25 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
详解Python中下划线的5种含义
2021/07/15 Python
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers