JavaScript模拟用户单击事件

公司项目想要实现一种功能：

单击一个按钮或超连接，而后会出现其余的超连接，这时要让其中的一个超连接被单击，以显示一个初始页面。（公司页面使用了frameset）

很显然，以后的超连接单击事件须要经过JavaScript来触发。
一开始，我想到了用jQuery的click()事件来触发超连接的单击事件（与trigger("click")同样的效果）。结果发现不如人意。
实例以下：
效果图
IE:

FireFox: 

Html代码 

< h3 >请单击”Click Me"。测试提交按钮与超连接是否也被单击了。 </h3>
   < button id ="btn" >Click Me </button>
   < form action ="#" >
     < input type ="text" name ="userName" value ="徐新华-polaris" readonly />
     < input id ="submit" type ="submit" value ="别点击此按钮提交" onclick ="alert('触发了提交按钮的单击事件！');" />
   </form>
   < a id ="aLink" href ="http://www.google.cn" onclick = "alert('触发了超连接的单击事件！');" >代码触发超连接 </a>

 

Javascript代码

$( function()
{
  $( "#btn").click( function()
  {
    $( "#submit").click();
    $( "#aLink").click();
  });
});

当单击：Click Me按钮时，前后弹出提交按钮被单击、超连接被单击的对话框，这代表二者的单击事件都被触发了。然而，从地址栏中能够看到，提交按钮的单击事件触发后，执行了它的默认行为：提交表单；但是超连接的单击事件触发后，并无连接到目标地址。（不要怀疑说是提交按钮的提交地址对超连接有影响，由于我去掉提交按钮，只留下超连接也不会连接到目标地址。）
也许jQuery中的click()方法对超连接的单击事件并无使其执行浏览器的默认行为（即便你手动加入return true也没有用）。注意：tigger("click")与click()同样的。jQuery文档中说“这个函数也会致使浏览器同名的默认行为的执行”。同名的？不太明白，可是超连接的确不能执行它的默认行为。这是，只能想另外的方法——抛弃jQuery提供的事件。
回到JavaScript本身的事件——click。代码以下：

Javascript代码

$( function()
{
  $( "#btn").click( function()
  {
    $( "#submit").click();
    $( "#aLink").get(0).click();
  });
});

在IE中一测试，经过了……有点兴奋。但是，在fireFox中却提示：click()不是一个function。说真的，IE浏览器提供的东西对开发人员来讲很好，而fireFox却没有，好比以前说到的onpropertychange等。不过，咱们必须的考虑IE以外的浏览器。在网上查资料，有很多人提到在fireFox中要用代码触发一个事件，须要以下处理：

Javascript代码

var evt = document.createEvent( "MouseEvents");
evt.initEvent( "click", false, false); // 或用initMouseEvent()，不过须要更多参数
$( "#aLink").get(0).dispatchEvent(evt);

按以上方法来实现我想要的功能，代码以下：

Javascript代码

$( function()
{
  $( "#btn").click( function()
  {
    $( "#submit").click();

     if($.browser.msie)
    {
      $( "#aLink").get(0).click();
    }
     else
    {
       var evt = document.createEvent( "MouseEvents");
      evt.initEvent( "click", false, false);
      $( "#aLink").get(0).dispatchEvent(evt);    
    }
  });
});

这时，在IE中是彻底正常的。然而，在fireFox中的状况与直接使用jQuery的click()事件同样，能触发单击事件，超连接却没有转到目标地址（注意：提交按钮用此方法也是可以提交的，我想jQuery的click()的实现大概是这样实现的吧）。哎，以为仍是IE好。呵呵。
如此一来，这种方法仍然不能解决FireFox中的问题。得继续寻找其余方法。
既然在fireFox中可以触发单击事件，却不能转到超连接的目标地址，那么，能够用js来实现跳转，即：使用location对象。代码以下：

Javascript代码

$( function()
{
  $( "#btn").click( function()
  {
    $( "#submit").click();

     if($.browser.msie)
    {
      $( "#aLink").get(0).click();
    }
     else
    {
       // 绑定单击事件
      $( "#aLink").click( function()
      {
        document.location = $( this).attr( "href"); // window.location = $(this).attr("href");也能够，可是执行的时间不一样
      });
        
       // 触发单击事件
      $( "#aLink").click();
    }
  });
});

这样就大功告成。有一个地方要说明一下：document.location与window.location。这两个均可以，然而他们的执行时间不一样，window的执行时间较早。读者能够本身试试。
虽然实现了这个例子，然而，运用到项目中却出问题了，由于项目中使用了frameset（虽然如今不少人不建议使用frameset，但项目用了也没办法，得这样作）。所以须要指定连接的目标url在哪一个frame中显示，然而，经过<a>中的target是没法实现的，由于<a>根本不会执行默认行为，须要经过js来实现。
咱们知道，document表明当前的页面（当前执行元素所在页面）。若是咱们可以找到当前超连接的url但愿放入的frame，咱们就能够找到它对象的document。固然找到超连接url但愿放入的frame很容易，这是由你本身决定将其放到哪的。示例代码以下：

Javascript代码

window.parent.frames['view'].document.location = $( "#aLink").attr( "href");    

其中，'view'是超连接url但愿放入的frame的name或id（最好是id和name命名同样）。建议IE中别用上面的方法，而用前面介绍的click()方法。
如今已经解决了全部的问题。可能还有人会有这种需求：就是在<a>中写上target，如<a target="_blank"></a>之类的。但愿按target的要求触发超连接。固然，这是非IE浏览器有的问题。
实际上，下面我要介绍的方法是通用行的。能够替代window.parent.frames['view'].document.location。代码以下：

Javascript代码

window.open($( this).attr( "href"),$( this).attr( "target"));    

若是没有定义target属性，默认会当成'_blank'处理，这与用户单击超连接的效果不同。这种方式是跨浏览器的，因此，只须要要用这种方式便可。这时，回到用jQuery+原始JavaScirpt来实现，这时最终、我的认为最好的方法。完整最终代码以下：

Html代码

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
     < head >
         < title >JavaScript模拟用户单击事件——徐新华 polaris </title>
    
         < meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
         < meta http-equiv ="description" content ="this is my page" >
         < meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >

   < ! -- 引入jQuery -- >
   < script type ="text/javascript" src ="scripts/jQuery/jquery-1.3.2.js" > </script>
   < script type ="text/javascript" >
    /**    
    * 模拟用户单击事件 处理超连接的问题
    * @author xuxinhua
    */
    $(function()
    {
      $("#btn").click(function()
      {
        $("#submit").click();
        
        // 绑定单击事件
        $("#aLink").click(function()
        {
          window.open($(this).attr("href"),$(this).attr("target"));
        });
            
        // 触发单击事件（会执行全部绑定的单击事件处理函数）
        $("#aLink").click();
      });
    });
   </script>
     </head>
    
     < body >
       < h3 >请单击”Click Me"。测试提交按钮与超连接是否也被单击了。 </h3>
   < button id ="btn" >Click Me </button>
   < form action ="#" >
     < input type ="text" name ="userName" value ="徐新华-polaris" readonly />
     < input id ="submit" type ="submit" value ="别点击此按钮提交" onclick ="alert('触发了提交按钮的单击事件！');" />
   </form>
   < a id ="aLink" href ="http://www.google.cn" target ="_self" onclick = "alert('触发了超连接的单击事件！');" >代码触发超连接 </a>
     </body>
    
</html>

注意：须要此处须要先绑定一个click处理函数，而后再触发click事件 总结： 网上有一些JavaScript模拟用户单击事件的文章，可是都不全面，总会有这样那样的问题。虽然，我在此列举了众多的方法，以为基本的问题都应该解决了，然而仍是有可能有人遇到新的问题。若是遇到什么问题，能够跟我一块儿探讨……