昨天，有个同事研究了以下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-权威指南学习笔记15.2

    1.读取Element的innerHTML属性作为字符串标记返回那个元素的内容. 2.当设置元素的outerHTML时,元素本身被新的内容所替换.只有Element节点定义了outerHTML属性,D ...

  2. 计算mysql中某个字段某字符出现的次数，case when 和 截取字符的用法

    select LENGTH(type) - LENGTH(replace(type,'_','')) as counts from sa_log_olap where type like 'XX_XX ...

  3. FineReport中如何自定义登录界面

    在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证. ...

  4. Android 应用安装

    DDMS下Files Explorer /data/app/xxx.apk 安装过程:1.拷贝文件xxx.apk到/data/app/xxx-1.apk 2.在/data/data目录下创建一个文件夹 ...

  5. 实现自定义Session

    1. 回话状态接口 /// <summary> /// 会话状态策略接口 /// </summary> public partial interface ISessionStr ...

  6. 使用 Azure CLI 创建和管理 Linux VM

    Azure 虚拟机提供完全可配置的灵活计算环境. 本教程介绍 Azure 虚拟机的基本部署项目,例如选择 VM 大小.选择 VM 映像和部署 VM. 你将学习如何执行以下操作: 创建并连接到 VM 选 ...

  7. mongodb/python3.6/mysql的安装

    1 下载与解压 在官网下载mongodb安装包 tar -zxvf mongodb-linux-x86_64-ubuntu1604-3.4.0.tgz 2 移动安装文件 sudo mv mongodb ...

  8. [翻译] BKZoomView

    BKZoomView https://github.com/freshking/BKZoomView A UIView that will zoom into its parent view. It ...

  9. centos7.4之zabbix4.0的fping监控

    参考博文: https://www.cnblogs.com/lei0213/p/8859326.html 注释:他是额外安装fping的:因为我yum安装的zabbix,fping就已经自带了:安装步 ...

  10. jiekou

    接口 新的接口 package cn.eangaie.jingdong.controller;   import cn.eangaie.jingdong.entity.Result; import c ...