js模拟点击事件实现代码

类型:转载 时间:2012-11-06

在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单。上代码吧
html:

复制代码代码如下:

请单击“提交”,测试提交按钮的单击事件也被触发了。

提交 

 

 

 

 

Javscript:

复制代码代码如下:



经过测试,IE,FF,Chrome,Opera,Safari都没有问题,均可正常提交表单。

但在实际的设计中,为了让提交按钮更好看,buildder经常把它们用a标签来处理,加个背景图片来模拟按钮,我们仍然用上面的思路来尝试,增加一个a标签,让它来提交表单,我们仅修改html。

Html:

复制代码代码如下:

请单击“提交”,测试提交按钮的单击事件也被触发了。

提交

模拟提交按钮 

 

javascript:

复制代码代码如下:



运行后,问题出现了,IE、FF、Opera均OK,但Chrome和Safari不能正常运行,后来网上搜索了下,发现a标签并不是和按钮一样有onclick()事件的,解决办法是针对
IE 和 FF编写不同的逻辑,JS代码如下: 

javascript:

复制代码代码如下:



至此,问题解决,虽然这个问题很简单,但很容易被大家忽略,贴出来和大家一起分享。

语法: 

createEvent(eventType)

参数 描述
eventType 想获取的 Event
对象的事件模块名。关于有效的事件类型列表,请参阅”说明”部分。

返回值

返回新创建的 Event对象,具有指定的类型。

抛出

如果实现支持需要的事件类型,该方法将抛出代码为
NOT_SUPPORTED_ERR 的 DOMException异常。

说明

该方法将创建一种新的事件类型,该类型由参数 eventType 指定。注意,该参数的值不是要创建的事件接口的名称,而是定义那个接口的
DOM 模块的名称。

下表列出了 eventType 的合法值和每个值创建的事件接口:

参数 事件接口 初始化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()

用该方法创建了 Event
对象以后,必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息,请参阅 Event对象参考。

该方法实际上不是由 Document
接口定义的,而是由 DocumentEvent 接口定义的。如果一个实现支持 Event 模块,那么 Document 对象就会实现
DocumentEvent 接口并支持该方法。

如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!! 点击进入社区

js模拟点击事件实现代码的更多相关文章

  1. 手机端js模拟长按事件(代码仿照jQuery)

    代码编写: $.fn.longPress = function(fn) { var timeout = undefined; var $this = this; for(var i = 0;i< ...

  2. jquery click()方法模拟点击事件对a标签不生效

    if(e.keyCode == 13) { $items.eq(index).click(); return; } 搜索框下拉列表模拟点击时间,使用上述代码不能触发链接跳转 1,页面使用了bootst ...

  3. 使用AccessibilityService模拟点击事件失败的分析

    使用AccessibilityService模拟点击事件的方法: AccessibilityNodeInfo.performAction(AccessibilityNodeInfo.ACTION_CL ...

  4. jquery click()方法模拟点击事件对a标签不生效的解决办法

    阅读数:8971 <a href="www.baidu.com"></a> 1 问题分析 点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都 ...

  5. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  6. 使用js模拟点击,点击a链接 $("#abc ").click(); 无效的解决方案

    摘要: 问题分析 点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都是点击的A标签中的文字了. 所以要想用JS模拟点击A标签事件,就得先往A标签中的文字添加能被JS捕获的元素,然后再用 ...

  7. C#截取用户的点击事件的代码

    在代码过程中中,把做工程过程中常用的代码备份一下,如下代码内容是关于C#截取用户的点击事件的代码,应该是对大家也有好处. private void SomeControl_KeyDown(object ...

  8. jquery模拟点击事件

    在某些情况下,我们需要自动执行一些点击事件.比如:一些 tab 一般是通过点击事件来加载不同的数据内容. 而如果要页面加载完直接显示第三个 tab,怎么办呢?此时就需要用到 jQuery 的模拟点击事 ...

  9. 查找和定位Android应用的按钮点击事件的代码位置基于Xposed Hook实现

    本文博客地址:https://blog.csdn.net/QQ1084283172/article/details/80956455 在进行Android程序的逆向分析的时候,经常需要通过Androi ...

随机推荐

  1. 一个想法照进现实-《IT连》创业项目:一个转折一个反思

    前言: 距离上一篇介绍IT连创业项目的文章,已经过去2个月了,没想到我竟然这么久没写文章向大伙汇报进度了,实在抱歉. 关于这事,我得好好反省,认真检讨,好好写文,哈. 今天主要是讲述一下最近创业的进展 ...

  2. eclipse导入lombok后打不开(如果你的lombok不是最新的,那就来下载最新的)

    如果你的不是最新的,去这里下载最新版的,先点击左上角的Download红方块,然后再点击下图中的位置 https://projectlombok.org/ 下载完后把eclipse关掉,双击下载的ja ...

  3. PyCharm中Directory与Python package的区别

    对于Python而言,有一点是要认识明确的,python作为一个相对而言轻量级的,易用的脚本语言(当然其功能并不仅限于此,在此只是讨论该特点),随着程序的增长,可能想要把它分成几个文件,以便逻辑更加清 ...

  4. vue模板的几种写法及变化

    第一种: 2+版本支持,1+版本支持 <script> <template id="aaa"> <h1>我是组件2</h1> < ...

  5. VsCode 附加Chorme调试TS方法

    命令行进入:[谷歌浏览器安装目录/]/chrome.exe --remote-debugging-port=9222 关闭所有窗口并结束Chorme进程(如果无法附加调试做此操作,可以正常调试请忽略. ...

  6. Celery 使用(一)

    Celery 使用(一) 架构 Producer:任务发布者: Celery Beat:任务调度器,Beat进程会读取配置文件中的内容,周期性的将配置中到期需要执行的任务发送给任务队列: Broker ...

  7. Linux系统常见调用及其分类

    Linux系统调用主要可以分为以下几类: 进程控制  fork 创建一个新进程 clone 按指定条件创建子进程 execve 运行可执行文件 exit 中止进程 _exit 立即中止当前进程 get ...

  8. php面试题汇总一(基础篇附答案)

    一份不错的php面试题,附答案,有准备换工作的同学可以参考一下. 1:使用五种以上方式获取一个文件的扩展名要求:dir/upload.image.jpg,找出 .jpg 或者 jpg ,必须使用PHP ...

  9. Charles使用(二)

    Charles使用(二)   破解Charles 找到Charles应用-->右键显示包内容--->contents-->java:更换Charles.jar即可 链接: https ...

  10. HDU 6170----Two strings(DP)

    题目链接 Problem Description Giving two strings and you should judge if they are matched.The first strin ...