JavaScript模拟用户点击事件

一开始，我想到用jQuery的click()事件来触发超链接的click事件(与trigger('click ')具有相同的效果)。结果并不令人满意。示例：渲染ie: 。

火狐：

复制代码如下： h3请点击“点击我”。测试是否也单击了提交按钮和超链接。/H3按钮id=' BTN '单击我/按钮格式=' # '输入类型='文本'名称='用户名'值='徐新华-北极星'只读/输入id='提交'类型='提交'值='不要单击此按钮提交' onclick='alert('触发器。);//表单a id=' alink ' href=' http://www . Google . cn ' onclick=' alert('触发了超链接单击事件！' );代码触发超链接/a复制代码如下： $ (function () {$ ('# BTN '))。单击(function () {$ ('# submit '))。单击()；$('#aLink ')。单击()；});});单击“单击我”按钮时，会连续弹出单击提交按钮和单击超链接的对话框，表示两者的单击事件都已触发。但是，从地址栏可以看到，触发提交按钮的click事件后，会执行其默认行为：提交表单；但是，在超链接单击事件被触发后，它没有链接到目标地址。(不要怀疑提交按钮的提交地址对超链接有影响，因为我去掉了提交按钮，只留下超链接，没有链接到目标地址。)也许jQuery中的click()方法没有让超链接执行浏览器的默认行为(即使手动添加return true，也没用)。注意：跳跳虎(' click ')与click()相同。根据jQuery文档，“这个函数还会导致执行同名浏览器的默认行为”。同名？我不太明白，但是超链接真的不能执行它的默认行为。是的，我只能想到另一个方法——来丢弃jQuery提供的事件。回到JavaScript自己的事件——click。代码如下：复制的代码是： $ (function () {$ ('# BTN ')。单击(function () {$ ('# submit '))。单击()；$('#aLink ')。获取(0)。单击()；});});我通过了工业工程的第一次考试.有点激动。但是在fireFox中建议click()不是函数。老实说，IE浏览器提供的东西对开发者来说是非常好的，但是fireFox没有，比如前面提到的onpropertychange。但是，我们必须考虑IE以外的浏览器。在网上查资料，很多人提到在fireFox中应该用代码来触发一个事件，需要按照如下方式处理：复制代码如下： varevt=document . create event(' mouse events ')；evt.initEvent('click '，false，false)；//或者使用initMouseEvent()，但是需要更多的参数$ ('# alink ')。获取(0)。dispatchevent(evt)；按照上面的方法，我想实现这个功能。代码如下：复制代码如下： $ (function () {$ ('# BTN '))。单击(function () {$ ('# submit '))。单击()；if($.browser.msie) { $('#aLink ')。获取(0)。单击()；} else { var evt=document . createevent(' MouseEvents ')；evt.initEvent('click '，false，false)；$('#aLink ')。获取(0)。dispatchEvent(evt)；} });});这时候在IE里完全正常。但是在fireFox中，就像直接使用jQuery的click()事件一样，可以触发click事件，但是超链接不去目标地址(注意：提交按钮也可以通过这个方法提交，我觉得jQuery的click()的实现大概就是这样的)。嘿，我觉得IE更好。哈哈。因此，这种方法仍然不能解决FireFox中的问题。我们必须继续寻找其他方法。既然可以在fireFox中触发click事件，但是不能去超链接的目标地址，那么可以使用js实现跳转，也就是使用location对象。代码如下：复制的代码是： $ (function () {$ ('# BTN ')。单击(function () {$ ('# submit '))。单击()；if($.browser.msie) { $('#aLink ')。获取(0)。单击()；} else {//绑定click事件$ ('# alink ')。单击(function () {document。位置=$(这个)。attr(' href ')；//window.location=$(this)。attr(' href ')；可以，但执行时间不同})；//触发click事件$('#aLink ')。单击()；} });});所以你完了。有一个地方需要解释：文档、位置和窗口、位置.两者都可以，只是执行时间不同，window的执行时间更早。读者可以自行尝试。

虽然这个例子已经实现了，但是应用到项目中就出现了问题，因为项目中使用了frameset(虽然现在很多人都不建议使用frameset，但是项目没有办法使用，只好这样做)。因此，有必要指定显示链接目标url的框架。但是不能通过A中的target来实现，因为A根本不会执行默认行为，需要通过js来实现。我们知道，document表示当前页面(当前执行元素所在的页面)。如果我们能找到当前超链接的url要放置的框架，我们就能找到它的对象的文档。当然，很容易找到超链接url想要放入的框架，由您决定放在哪里。示例代码如下：复制代码如下： window . parent . frames[' view ']。document.location=$ ('# alink ')。attr(' href ')；其中“视图”是要放置超链接url的框架的名称或id(最好将id命名为名称)。建议用前面介绍的click()方法代替IE中的上述方法。现在所有的问题都解决了。可能还有其他人需要在中编写target，比如a target=' _ blank'/a，我想根据target的需要触发超链接。当然，这对于非IE浏览器来说是个问题。其实我下面介绍的方法是通用的。您可以替换window . parent . frames[' view ']. document . location.代码如下：复制代码如下：window.open ($ (this)。attr ('href ')，$ (this)。attr(' target ')；如果没有定义目标属性，默认情况下会被视为' _blank '，这与用户点击超链接的效果不同。这个方法是跨浏览器的，所以只需要使用这个方法。这时，我们回到jQuery最初的JavaScirpt，此时，我们终于想到了最好的方法。最终代码如下：复制代码如下：doctype html public '-//W3C//dtd html 4.01 transitional//en ' html head title JavaScript模拟用户点击事件——徐新华Polaris/title meta http-equiv=' keywords ' content=' keywords 1，keywords 2，keywords 3 ' meta http-equiv=' description ' content='这是我的页面' meta http-equiv=' content-type ' content=' text/html；charset=UTF-8 '！-介绍jquery-script type=' text/JavaScript ' src=' http : script/jquery/jquery-1 . 3 . 2 . js '/script type=' text/JavaScript '/* * *。模拟用户点击事件处理超链接问题* @作者徐新华*/$ (function () {$ ('# BTN ')。单击(function () {$ ('# submit '))。单击()；//绑定点击事件$ ('# alink ')。单击(function () {window.open ($ (this))。attr ('href ')，$ (this)。attr(' target ')；});//触发click事件(将执行所有绑定的click事件处理程序)$('#aLink ')。单击()；});});/脚本/头体h3请点击“点击我”。测试是否也单击了提交按钮和超链接。

/H3按钮id=' BTN '单击我/按钮格式=' # '输入类型='文本'名称='用户名'值='徐新华-北极星'只读/输入id='提交'类型='提交'值='不要单击此按钮提交' onclick='alert('触发器。');'//表单a id=' alink ' href=' http://www . Google . cn ' target=' _ self ' onclick=' alert('触发了超链接单击事件！');'触发超链接/a/body/html复制代码如下：doctype html public '-//W3C//dtd html 4.01 transitional//en ' html head title JavaScript模拟用户点击事件——徐新华Polaris/title meta http-equiv=' keywords ' content=' keywords 1，keywords 2，keywords 3 ' meta http-equiv=' description ' content='这是我的页面' meta http-equiv=' content-type ' content=' text/html；charset=UTF-8 '！-介绍jquery-脚本类型=' text/JavaScript ' src=' http : script/jquery/jquery-1 . 3 . 2 . js '/script script type=' text/JavaScript '！-/* * *模拟用户点击事件处理超链接的问题* @作者徐新华*/$ (function () {$ ('# BTN ')。单击(function () {$ ('# submit '))。单击()；//绑定点击事件$ ('# alink ')。单击(function () {window.open ($ (this))。attr ('href ')，$ (this)。attr(' target ')；});//触发click事件(将执行所有绑定的click事件处理程序)$('#aLink ')。单击()；});});/////脚本/头体h3请点击“点击我”。测试是否也单击了提交按钮和超链接。/H3按钮id=' BTN '单击我/按钮格式=' # '输入类型='文本'名称='用户名'值='徐新华-北极星'只读/输入id='提交'类型='提交'值='不要单击此按钮提交' onclick='alert('触发器。);//表单a id=' alink ' href=' http://www . Google . cn ' target=' _ self ' onclick=' alert('触发了超链接单击事件！' );代码触发超链接/a/body/html注意：在触发点击事件之前需要在这里绑定一个点击处理程序总结：网上有一些文章用JavaScript模拟用户点击事件，但是并不全面，总会出现一些问题。虽然我在这里列举了很多方法，我认为所有的基本问题都应该解决，但仍然有可能有些人会遇到新的问题。如果你遇到任何问题，你可以和我讨论.