zoukankan      html  css  js  c++  java
  • 关于jquery的click()方法

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

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 
     6 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
     7      <script type="text/javascript">
     8          $(document).ready(function () {
     9              $('#ago').click(function () {
    10 
    11                  $('#a01').click();
    12                  $('#a02').click();
    13 
    14              });
    15          });
    16          $(function () {
    17              $("#a01").click( function () {
    18                 window.open("http://www.baidu.com" ) });
    19          })
    20          $(function () {
    21              $("#a02").click( function () {
    22                 window.open("http://www.g.cn" ) });
    23          })
    24      </script>,
    25 </head>
    26         <li><a id="a01" target="_blank" href="http://www.baidu.com">www.baidu.com</a></li>
    27         <li><a id="a02" target="_blank" href="http://www.g.cn">www.g.cn</a></li>
    28 <br>
    29         <button id="ago" style="border: 1px solid black;cursor: pointer">更新</button>
    30 
    31 
    32 </body>
    33 </html>

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

    经查资料:

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

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

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 
     6 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
     7      <script type="text/javascript">
     8       function dispatch(el, type){
     9         try{
    10             var evt = document.createEvent('Event');
    11             evt.initEvent(type,true,true);
    12             el.dispatchEvent(evt);
    13             }catch(e){alert(e)}
    14         }
    15      $(function () {
    16             $("#ago").click(function () {
    17                 var a01 = document.getElementById('a01');
    18                 var a02 = document.getElementById('a02');
    19                 dispatch(a02, 'click');
    20                 dispatch(a01, 'click');
    21 
    22 
    23             })
    24 
    25      });
    26          $(function () {
    27              $("#a01").click( function () {
    28                 window.open("http://www.baidu.com" ) });
    29          });
    30          $(function () {
    31              $("#a02").click( function () {
    32                 window.open("http://www.g.cn" ) });
    33          })
    34      </script>
    35 </head>
    36         <li><a id="a01" target="_blank" href="http://www.baidu.com">www.baidu.com</a></li>
    37         <li><a id="a02" target="_blank" href="http://www.g.cn">www.g.cn</a></li>
    38 <br>
    39         <button id="ago" style="border: 1px solid black;cursor: pointer"><a id="2"></a>更新</button>
    40 
    41 
    42 </body>
    43 </html>
  • 相关阅读:
    mysql 函数 存储过程 事件(event) job 模板
    protobuf 无proto 解码 decode 语言 java python
    mitmproxy fiddler 抓包 填坑
    android adb 常用命令
    android机器人 模拟 踩坑过程
    RabbitMQ添加新用户并支持远程访问
    Windows下RabbitMQ安装及配置
    Java mybatis mysql 常用数据类型对应关系
    easyExcel 踩坑
    linux防火墙查看状态firewall、iptable
  • 原文地址:https://www.cnblogs.com/evilliu/p/6707699.html
Copyright © 2011-2022 走看看