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模擬用戶單擊事件的文章，可是都不全面，總會有這樣那樣的問題。雖然，我在此列舉了衆多的方法，以爲基本的問題都應該解決了，然而仍是有可能有人遇到新的問題。若是遇到什麼問題，能夠跟我一塊兒探討……