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变强势
Jun 22 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
JS与框架页的操作代码
Jan 17 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
详解Angular 自定义结构指令
2017/06/21 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python实现机器人卡牌
2019/10/06 Python
pytorch梯度剪裁方式
2020/02/04 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
曼城官方网上商店:Manchester City
2019/09/10 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
旅游网创业计划书
2014/01/31 职场文书
逃课上网检讨书
2014/02/20 职场文书
消防安全责任书
2014/04/14 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
公司演讲稿开场白
2014/08/25 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
鲁冰花观后感
2015/06/10 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS