关于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>