- 浏览: 1172354 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
最简单的莫过于使用click方法
<input id="btn" type="button" value="BUTTON" onclick="alert(1)"/> <script> var btn = document.getElementById('btn'); btn.click(); </script>
所有浏览器都弹出了1。
把input换成div呢
<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(2)"></div> <script> var d1 = document.getElementById('d1'); d1.click(); </script>
这次Safari/Chrome中没有弹出2。
即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。
以上的事件都是直接添加在html属性中的(内联事件)。click方法能触发使用el.onXXX/addEventListener/attachEvent添加的事件吗?
<input id="btn1" type="button" value="BUTTON 1"/> <input id="btn2" type="button" value="BUTTON 2"/> <script> var addListener = window.addEventListener ? function(el, type, fn) { el.addEventListener(type, fn, false); } : function(el, type, fn) { el.attachEvent('on' + type, fn); }; var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); btn1.onclick = function(){ alert(3); }; addListener(btn2, 'click', function() {alert(4)}); btn1.click(); btn2.click(); </script>
所有浏览器都依次弹出了3,4。
说明支持click方法的元素,无论使用内联方式还是el.onXX又或addEventListener/attachEvent添加事件都能触发。
click方法已经写入了HTML5草案,如果Safari/Chrome完成对剩下的元素的实现(非input/button)。那么模拟点击将十分简单,直接调用click方法。Firefox也是刚刚在版本5中实现对非input/button元素的click方法实现,这点Safari/Chrome有些落后了。
既然Safari/Chrome中click不可用, 我们就用dispatchEvent来实现了。
<input id="btn1" type="button" value="BUTTON 1" onclick="alert(1)"/> <input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/> <div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div> <script> function dispatch(el, type){ try{ var evt = document.createEvent('Event'); evt.initEvent(type,true,true); el.dispatchEvent(evt); }catch(e){alert(e)}; } var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var d1 = document.getElementById('d1'); dispatch(btn1, 'click'); dispatch(btn2, 'click'); dispatch(d1, 'click'); </script>
依次弹出了1,2,3。换成其它事件添加方式亦可触发。
IE中还有个fireEvent去主动触发事件,当然如果是点击事件使用click更好。非点击事件则只能通过fireEvent去触发了。
最后给出我的triggerClick方法,实现方式判断浏览器,判断nodeName。依据是Safari/Chrome不支持非input/button元素的click方法。
function triggerClick( el ) { var nodeName = el.nodeName, safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase()); if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) { try{ var evt = document.createEvent('Event'); evt.initEvent('click',true,true); el.dispatchEvent(evt); }catch(e){alert(e)}; }else{ el.click(); } }
上面的实现方式让你能明白浏览器的差异,但实现其实有点罗嗦。直接判断元素是否具有click方法即可,Safari/Chrome中非input/button元素没有click方法,返回undefined。
function triggerClick( el ) { if(el.click) { el.click(); }else{ try{ var evt = document.createEvent('Event'); evt.initEvent('click',true,true); el.dispatchEvent(evt); }catch(e){alert(e)}; } }
特性判断也比浏览器判断有更好的前瞻性,比如Safari/Chrome在后续版本中实现了非input/button元素的click方法,那么特性判断的函数仍然可以向下兼容。
发表评论
-
JavaScript获取图片的原始尺寸
2016-04-20 10:30 1644页面里的img元素,想要 ... -
JavaScript中奇葩的假值
2016-03-14 17:43 1215通常在以下语句结构中需要判断真假 if分支语句 whi ... -
世界上最短的数字判断代码
2016-03-14 16:21 1637我们知道JavaScript提供了typeof运算符,因此最 ... -
getBoundingClientRect在IE9/10里的bug
2015-01-12 08:30 1699getBoundingClientRect可以获得页面中某个 ... -
JavaScript中的直接量与初始器的区别
2014-11-08 06:09 1682很多代码优化及公司规范都会提到 写对象不应该 var ... -
JavaScript中的不可见数据类型
2014-11-02 11:08 1340JS提供了一些内置对象、函数和构造器供我们编程,如Math ... -
ES5严格模式
2014-10-08 18:20 1303严格模式(Strict mode)是由ECMA-262规范 ... -
JavaScript生成GUID的算法
2014-07-16 14:25 3045全局唯一标识符(GUID,Globally Unique ... -
JavaScript中点号“.”的多义性
2014-06-07 19:42 1691点号「.」在JavaScript中 ... -
冗余换性能-从Backbone的triggerEvents说开了去
2014-02-19 11:03 991Backbone是一个优秀的前端MVC库,它的代码质量必定 ... -
JavaScript中delete操作符不能删除的对象
2013-11-27 13:21 1340ES3 中,delete在8.6.2.5及11.4.1有介 ... -
JavaScript中instanceof对于不同的构造器可能都返回true
2013-11-19 11:13 1253我们知道 instanceof 运算符用来检查对象是否为某 ... -
JavaScript里模拟sleep
2013-10-16 07:52 1571有几种方式,但都不完美 一、不断循环,直到达到指定时间 ... -
参数有中包含空格且使用Post提交时须将空格转换成加号
2013-10-14 08:07 5238jQuery的serialize模块中有个r20正则 ... -
JavaScript中“基本类型”之争
2013-10-04 20:58 1156前端面试中常被问到的问题之一就是“JavaScript的基本 ... -
ES3和ES5关于计算顺序的问题(ES5先计算函数ES3则是参数)
2013-09-13 23:35 1333从cmc那看到的,分享给园友。以下是一个怪异的代码,谁 ... -
一道关于"/g"笔试题
2013-07-26 07:13 1073正则里“g”表示全局(global)的意思,比如当替换字符串 ... -
JavaScript原型继承的陷阱
2013-05-27 20:51 1415JavaScript默认采用原型 ... -
JavaScript中__proto__与prototype的关系
2013-05-21 10:38 1483这里讨论下对象的内 ... -
JavaScript中__proto__与prototype的关系
2013-05-21 10:01 3这里讨论下对象的内 ...
相关推荐
在Android平台上,模拟点击是一种常见的自动化测试或辅助功能技术,它允许开发者或用户在无需物理交互的情况下,通过程序实现对屏幕特定位置的周期性点击。这个主题主要涉及到以下几个知识点: 1. **Android权限**...
3. **JavaScript交互**:由于模拟点击通常涉及到页面元素的交互,可以通过CEFSharp的ChromiumWebBrowser控件的ExecuteScriptAsync方法执行JavaScript代码,实现对页面元素的点击、输入等操作。这些JavaScript代码...
3. **触发点击事件**:通过调用按钮元素的`click`方法来模拟点击。 #### 3.2 示例代码分析 提供的代码示例中,主要实现了两段逻辑: ##### 3.2.1 第一段代码 ```vb Private Sub Command1_Click() Dim Vdoc, i, S ...
本文将深入探讨三种实现自动点击的方式,并以Android平台为例,详细解析AndroidAutoClick项目。 1. **基于ADB(Android Debug Bridge)的自动点击** ADB是Android开发者常用的工具,它提供了一个命令行接口来与...
模拟消息点击事件通常涉及以下几个步骤: 1. **创建消息结构**:首先,你需要创建一个WM_COMMAND消息结构,这是Windows消息系统中用于通知应用程序用户界面元素已经执行了一个操作的消息。这个结构通常包含一个低...
在源码中,模拟点击通常会涉及以下几个步骤: 1. **加载网页**:使用易语言的网络库或者自定义的HTTP请求模块,加载目标网页的HTML内容到超文本浏览框中。 2. **解析DOM**:通过易语言提供的API或自定义函数,解析...
这个主题“模拟鼠标左右键点击屏幕位置”涉及到的技术点主要包括以下几个方面: 1. **鼠标事件模拟**:在软件开发中,我们可以通过编程来模拟用户的鼠标行为,如左键点击、右键点击等。这通常通过调用特定的API函数...
在安卓平台上,按键模拟点击是一种自动化测试和辅助工具技术,主要通过编程来模拟用户对屏幕上的按钮、滑块等元素的点击操作。这种技术在游戏自动化、应用测试、日常使用中提升效率等方面都有广泛的应用。"安卓版...
点击“运行”按钮启动模拟,然后在HMI界面上操作按钮、滑块、文本框等元素,检查它们的功能性和响应性。 5. **报警与事件**:在模拟环境中,可以触发报警和事件来测试报警处理和事件响应机制。验证是否能正确显示...
* BioWin 甚至为您的数据填入空格提供了几种不同的策略! 运行一个模拟: * 稳定状态平衡工具 * 动态模拟工具 * BioWin 时间表能力有许多不同的操作条件例如溶解氧定位点、空气流量和温度。 帮助和手册: * ...
3. **点击页面元素**:内容脚本可以获取DOM元素,然后模拟用户点击,通常使用`element.click()`函数来实现。 开发Chrome插件需要用到的技能包括JavaScript编程、理解DOM操作、以及熟悉Chrome插件的API。开发者可以...
模拟时钟是时间显示的一种方式,它通过指针旋转来表示小时、分钟和秒。在电子设备上,模拟时钟通常会以数字形式呈现,但依然保留了传统机械时钟的外观和感觉。微信小程序中的模拟时钟则是在手机或平板电脑屏幕上模拟...
接下来介绍几种实现方式。 ##### 2.1 使用 SendKeys 方法 `SendKeys`方法是一种常用的模拟键盘输入的方式。它支持发送多种键盘输入,包括按键组合。例如,发送一个向下的方向键: ```vb ' 创建 WScript.Shell ...
总的来说,jQuery模拟select效果提供了一种灵活的方式来定制下拉菜单,使得我们可以更自由地控制其外观和交互。通过深入理解HTML、CSS和jQuery,你可以构建出更复杂、更符合用户体验的模拟select组件。
javascript模拟点击广告是前端开发中一种特定的技术应用,主要用于在用户未实际进行点击操作时,通过编程的方式达到打开广告链接的效果,从而欺骗广告商的点击统计系统。这一行为尽管具有技术挑战性,但其本身可能...
例如,JavaScript可以通过`window.confirm()`函数模拟点击确认按钮,但这种方法有安全和隐私的风险,因为它可能被恶意利用。 在防止误点击方面,用户可以根据对话框的标题来判断是否需要自动确认。例如,如果知道...
这种技术的核心是通过编程语言实现对网页元素的识别和控制,使得软件能够模拟人类用户的行为,如点击、填写表单、滚动页面等。 在实际应用中,网页模拟操作工具广泛应用于以下几个方面: 1. 数据抓取:对于需要...
2. **任务栏**:可以使用自定义的HTML元素和CSS样式来模拟任务栏,显示当前运行的应用程序图标,并提供启动新应用的快捷方式。 3. **桌面图标**:通过CSS和jQuery,我们可以创建桌面图标并实现点击后触发相应功能或...
通过阅读和理解这份源码,我们可以学习到易语言中如何与操作系统进行交互,控制窗口元素,并了解模拟用户操作的技术。同时,这也是一个很好的实践案例,对于学习易语言的初学者来说,有助于提升对系统调用和事件驱动...
【js模拟小键盘】是一种在网页上通过JavaScript实现的虚拟键盘功能,主要应用于网页上的输入场景,例如在线考试系统、密码输入框等,避免了用户直接在物理键盘上输入,提高了数据安全性和用户体验。这种技术尤其适用...