昨天，有个同事研究了以下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. CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭

    一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .f ...

  2. [js常用]连续播放音频

    许多音频连续播放.有的时候音频过大会分成多个音频.播放的时候需要连续播放 <!DOCTYPE HTML> <html> <head> <meta charse ...

  3. mysql_real_escape_string与mysqli_real_escape_string

    参考 mysql_real_escape_string  mysqli_real_escape_string mysql_real_escape_string是用来转义字符的,主要是转义POST或GE ...

  4. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. Android 开发中三种多线程

    在开发工程中线程可以帮助我们提高运行速度,Android开发中我知道的线程有四个一个是老生长谈的Thread,第二个是asyncTask,第三个:TimetTask,第四个是Looper,四个多线程各 ...

  6. Android ListView几个重要属性

    1.transciptMode属性,需要用ListView或者其它显示大量Items的控件实时跟踪或者查看信息,并且希望最新的条目可以自动滚动到可视范围内.通过设置的控件transcriptMode属 ...

  7. zookeeper应用 - leader选举 锁

    模拟leader选举: 1.zookeeper服务器上有一个/leader节点 2.在/leader节点下创建短暂顺序节点/leader/lock-xxxxxxx 3.获取/leader的所有子节点并 ...

  8. 使用DataTables插件与后台对接表格

    function getResults(){ var callResults = $.ajax({ url: "....", //接口url type: "GET&quo ...

  9. Mysql 事务日志(Ib_logfile)

    mysql的innodb中事务日志ib_logfile(0/1) 概念:事务日志或称redo日志,在mysql中默认以ib_logfile0,ib_logfile1名称存在,可以手工修改参数,调节开启 ...

  10. Hibernate的increment主键生成机制带来的问题

    最近给学校做的系统,总出现主键插入冲突的问题.主键是通过hibernate自动生成的,设置increment属性,总出现Duplicate entry的错误.搜到解决方案如下: 在网站运行在apach ...