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>
  • 相关阅读:
    CodeForces 156B Suspects(枚举)
    CodeForces 156A Message(暴力)
    CodeForces 157B Trace
    CodeForces 157A Game Outcome
    HDU 3578 Greedy Tino(双塔DP)
    POJ 2609 Ferry Loading(双塔DP)
    Java 第十一届 蓝桥杯 省模拟赛 19000互质的个数
    Java 第十一届 蓝桥杯 省模拟赛 19000互质的个数
    Java 第十一届 蓝桥杯 省模拟赛 19000互质的个数
    Java 第十一届 蓝桥杯 省模拟赛十六进制转换成十进制
  • 原文地址:https://www.cnblogs.com/evilliu/p/6707699.html
Copyright © 2011-2022 走看看