昨天，有个同事研究了以下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. [js常用]百度将文字转化为语音实例

    嗷嗷方便的文字转语音,不过用的时候记得到百度语音上申请key,免费的.之前在网络上看到有人写了一部分,自己丰富下,以后用也方便 <!DOCTYPE html PUBLIC "-//W3 ...

  2. 51Nod1053 最大M子段和V2 二分+DP

    传送门 直接DP的话最多也只能做到\(O(nm)\),对于\(5\times 10^4\)的数据范围实在无能为力 夹克老爷提供的做法是贪心,思想大概是在调整的同时,合理构造每个选择对应的新状态,使得新 ...

  3. 2016最新Java学习计划

    一.Java学习路线图 二.Java学习路线图--视频篇 六大阶段 学完后目标 知识点 配套免费资源(视频+笔 记+源码+模板) 密码        第一阶段 Java基础 入门 学习周期: 35天 ...

  4. Android微信支付—注意事项

    坑点一:PayReq的参数 sign的生成 PayReq对象有个参数为packageValue 而sign生成时要用到packageValue,但是对应的Key是package,这里的key容易弄错 ...

  5. 在虚拟机中安装ubuntu16.04后不能全屏显示

    一.在终端输入:xrandr 二.输入:xrandr -s 1920x1440 参考网站:https://blog.csdn.net/qq_33202928/article/details/75021 ...

  6. JVM知识（四）：GC配置参数

    JVM配置参数分为三类参数:跟踪参数.堆分配参数.栈分配参数 这三类参数分别用于跟踪监控JVM状态,分配堆内存以及分配栈内存. 跟踪参数 跟踪参数用户跟踪监控JVM,往往被开发人员用于JVM调优以及故 ...

  7. Oracle EBS 系统仅存在英文的环境

    系统管理员 应用服务器 adadmin 编译

  8. [WSUS] [Windows 10 Upgrade 1607/1703] 升级出错，出现 0xC1800118 或者卡在下载中…… 0%后失败

    1. 安装 KB3159706 ,并进行安装后维护操作:https://support.microsoft.com/en-us/help/3159706/update-enables-esd-decr ...

  9. [控件] LabelView

    LabelView 此LabelView是用来将Label显示在固定的View上的,需要计算Label的高度与宽度. 源码: NSString+StringHeight.h 与 NSString+St ...

  10. swift版的枚举变量

    swift版的枚举变量 swift的枚举类型跟普通的类是极为类似的,使用的时候,请不要以为他是一个常量,以下是测试用源码 // // ViewController.swift // SwiftEnum ...