昨天，有个同事研究了以下jqury的click()方法，代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

      <script type="text/javascript">

          $(document).ready(function () {

              $('#ago').click(function () {

                  $('#a01').click();

                  $('#a02').click();

              });

          });

          $(function () {

              $("#a01").click( function () {

                 window.open("http://www.baidu.com" ) });

          })

          $(function () {

              $("#a02").click( function () {

                 window.open("http://www.g.cn" ) });

          })

      </script>，

 </head>

         <li><a id="a01" target="_blank" href="http://www.baidu.com">www.baidu.com</a></li>

         <li><a id="a02" target="_blank" href="http://www.g.cn">www.g.cn</a></li>

 <br>

         <button id="ago" style="border: 1px solid black;cursor: pointer">更新</button>

 </body>

 </html>

如上代码，在chrom和Firefox IE 完全不一样。在chrome上只能打开一个窗口，而其他浏览器在点击更新的时候，可以同时打开2个页面。

经查资料：

Safari/Chrom只有在标签input/button情况下，支持click方法，而我们的例子中非如上标签。所以，我们在调用click()方法的时候，出现问题。

既然不支持jquery的方法，那我们使用dom的dispatchEvent方法，这样就支持了。代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

      <script type="text/javascript">

       function dispatch(el, type){

         try{

             var evt = document.createEvent('Event');

             evt.initEvent(type,true,true);

             el.dispatchEvent(evt);

             }catch(e){alert(e)}

         }

      $(function () {

             $("#ago").click(function () {

                 var a01 = document.getElementById('a01');

                 var a02 = document.getElementById('a02');

                 dispatch(a02, 'click');

                 dispatch(a01, 'click');

             })

      });

          $(function () {

              $("#a01").click( function () {

                 window.open("http://www.baidu.com" ) });

          });

          $(function () {

              $("#a02").click( function () {

                 window.open("http://www.g.cn" ) });

          })

      </script>

 </head>

         <li><a id="a01" target="_blank" href="http://www.baidu.com">www.baidu.com</a></li>

         <li><a id="a02" target="_blank" href="http://www.g.cn">www.g.cn</a></li>

 <br>

         <button id="ago" style="border: 1px solid black;cursor: pointer"><a id=""></a>更新</button>

 </body>

 </html>

关于jquery的click()方法的更多相关文章

  1. jQuery 事件 click() 方法，dblclick() 方法

    click() 方法 当点击元素时,会发生 click 事件. 当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click. click() 方法触发 click 事件,或规定当发生 ...

  2. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

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

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

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

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

  5. jquery click()方法 语法

    jquery click()方法 语法 作用:当点击元素时,会发生 click 事件.当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click.click() 方法触发 click ...

  6. 避免jquery的click多次绑定方法

    $("#xxx").click(function(){}) 这样只是会在原click方法中继续添加新方法: 当然解决办法是解绑: $("#xxx").unbin ...

  7. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  8. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  9. jquery的ready方法（DOM是否加载完）详解与使用

    jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:

随机推荐

  1. react 中使用定时器 Timers(定时器)

    setTimeout,clearTmeout setInterval,clearInterval 在 class 中 class TimersDemo extends Component { cons ...

  2. Eclipse 校验取消

    eclipse Multiple annotations found at this line错误,eclipse开发过程中,一些XML配置文件会报错,但是这些其实不是错,飘红的原因是因为eclips ...

  3. webstorm忽略node_modules目录

    我在使用了cnpm后node_modules之前的层级目录变成了同一级目录,所以目录很多,造成webstorm读取时卡死. 网上大家列了各种方法,在这里我归纳一下! 先给大家看看一些相关链接. 方法1 ...

  4. centos7 安装mariadb最新版并配置

    打开http://mirrors.aliyun.com/,查找mariadb,然后拼装地址http://mirrors.aliyun.com/mariadb/yum打开,点开你想要的版本,选择你的操作 ...

  5. Django html标签make_safe

    from django.utils.safestring import mark_safe a = mark_safe("<a href='#'>test</a>&q ...

  6. 通过Places API Web Service获取兴趣点数据

    实验将爬取新加坡地区的银行POI数据 数据库采用mongodb,请自行安装,同时申请google的key 直接上代码 #coding=utf-8 import urllib import json i ...

  7. node-sass 解决 no such file or directory

    在使用node-sass编译的时候出现以下情况 Error: ENOENT: no such file or directory, scandir 'D:\xxxx\node_modules\.npm ...

  8. [CENTOS7] [IPTABLES] 卸载Firewall Id安装 IPTABLES及防火墙设置

    卸载Firewall ID,重装IPTABLES:先停止服务 systemctl stop firewalldsystemctl mask firewalld   yum install iptabl ...

  9. [微信] 客服接口调用的时候返回 40003 Invalid OpenID

    首先确认收件人在24小时内主动向公众号发过消息.该消息的 FromUserId 即是客服消息的 touser 参数的 OpenId 2017-05-19 更新:可以使用UTF-8了 string ur ...

  10. [WinCE] Can't find P/Invoke DLL sqlceme35.dll

    找到目录: C:\Program Files (x86)\Microsoft SQL Server Compact Edition\v3.5\Devices\wce500\armv4i 将 sqlce ...