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>
  • 相关阅读:
    排序算法-简单选择排序
    pygame模块的简介
    python设计模式之工厂模式
    一次完整的HTTP请求流程(当我们在浏览器输入一个URL后,发生了什么)
    HTTP协议,TCP、UDP协议
    Django rest framework框架中有哪些组件
    flask
    Flask上下文管理
    mac如何开启两个vmware虚拟机
    HTTP状态码
  • 原文地址:https://www.cnblogs.com/evilliu/p/6707699.html
Copyright © 2011-2022 走看看