昨天，有个同事研究了以下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. 升级cocoapods1.1.0版本遇到的坑

    先容我吐槽两句, 最近写Swfit3.0, 要用到一些框架, 然后就用cocoapods嘛, 结果说要cocoapods1.1.0版本才行, 而自己的是cocoapods1.0.1版本的, 所以就想着 ...

  2. webapi 后台跳转 后台输出html和script

    1.跳转 [HttpGet]public HttpResponseMessage LinkTo(){ HttpResponseMessage resp = new HttpResponseMessag ...

  3. 【CVE-2018-11116】openwrt rpcd 配置文件错误导致访问控制失效

    User can access to ubus over HTTP. This way depend on rpcd service. When misconfigure the rpcd's ACL ...

  4. Android保持屏幕常亮

    Android保持屏幕常亮,PowerManager.WakeLock的使用 package com.hebaijun.wakelock;      import android.app.Activi ...

  5. LeetCode题解之Number of 1 Bits

    1.题目描述 2.问题分析 使用C++ 标准库的 bitset 类,将整数转换为 二进制,然后将二进制表示转换为字符串,统计字符串中 1 的个数即可. 3.代码 int hammingWeight(u ...

  6. linux命令 zcat

    zcat命令查看一个gzip格式的压缩文件zcat file.gz  > test.txt 查看一个压缩文件的内容,并将内容 輸入到 文件test.txt zcat命令也可以解压缩数据,并把解压 ...

  7. 使用 CLI 创建 Azure VM 的自定义映像

    自定义映像类似于应用商店映像,不同的是自定义映像的创建者是你自己. 自定义映像可用于启动配置,例如预加载应用程序.应用程序配置和其他 OS 配置. 在本教程中,你将创建自己的 Azure 虚拟机自定义 ...

  8. webpack+express多页站点开发

    学习了webpack门级的教程后,觉得可能是专门为单页应用而量身打造的,比如webpack+react.webpack+vue等,都可以解决各种资源的依赖加载.打包的问题.甚至css都是打包在js里去 ...

  9. 初始Flask

    一.Flask介绍(轻量级的框架,非常快速的就能把程序搭建起来) Flask 主要特点小而轻,原生组件几乎为0, 三方提供的组件请参考Django 非常全面,属于短小精悍型框架 Flask是一个基于P ...

  10. ARC下block使用情况

    ARC与MRC的block有着一些区别,笔记整理ARC的block,仅仅是自己参考的笔记,详情请参考 http://www.cnbluebox.com/?p=255 在开始之前,请新建一个Model类 ...