JavaScript 模擬用戶單擊事件

更新時間：2009年12月31日 20:13:49 作者：

單擊一個按鈕或超鏈接，然后會出現(xiàn)其他的超鏈接，這時要讓其中的一個超鏈接被單擊，以顯示一個初始頁面。（公司頁面使用了frameset）很顯然，之后的超鏈接單擊事件需要通過JavaScript來觸發(fā)。

一開始，我想到了用jQuery的click()事件來觸發(fā)超鏈接的單擊事件（與trigger("click")一樣的效果）。結(jié)果發(fā)現(xiàn)不如人意。

實(shí)例如下：
效果圖
IE:

FireFox:

 
<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="別點(diǎn)擊此按鈕提交" onclick="alert('觸發(fā)了提交按鈕的單擊事件！');"/> 
    </form> 
    <a id="aLink"  onclick = "alert('觸發(fā)了超鏈接的單擊事件！');">代碼觸發(fā)超鏈接</a> 

復(fù)制代碼代碼如下:

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

當(dāng)單擊：Click Me按鈕時，先后彈出提交按鈕被單擊、超鏈接被單擊的對話框，這表明兩者的單擊事件都被觸發(fā)了。然而，從地址欄中可以看到，提交按鈕的單擊事件觸發(fā)后，執(zhí)行了它的默認(rèn)行為：提交表單；可是超鏈接的單擊事件觸發(fā)后，并沒有鏈接到目標(biāo)地址。（不要懷疑說是提交按鈕的提交地址對超鏈接有影響，因?yàn)槲胰サ籼峤话粹o，只留下超鏈接也不會鏈接到目標(biāo)地址。）

也許jQuery中的click()方法對超鏈接的單擊事件并沒有使其執(zhí)行瀏覽器的默認(rèn)行為（即使你手動加入return true也沒有用）。注意：tigger("click")與click()一樣的。jQuery文檔中說“這個函數(shù)也會導(dǎo)致瀏覽器同名的默認(rèn)行為的執(zhí)行”。同名的？不太明白，但是超鏈接的確不能執(zhí)行它的默認(rèn)行為。這是，只能想另外的方法——拋棄jQuery提供的事件。

回到JavaScript自己的事件——click。代碼如下：

復(fù)制代碼代碼如下:

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

在IE中一測試，通過了……有點(diǎn)興奮?？墒牵趂ireFox中卻提示：click()不是一個function。說真的，IE瀏覽器提供的東西對開發(fā)人員來說很好，而fireFox卻沒有，比如之前說到的onpropertychange等。不過，我們必須的考慮IE之外的瀏覽器。在網(wǎng)上查資料，有不少人提到在fireFox中要用代碼觸發(fā)一個事件，需要如下處理：

復(fù)制代碼代碼如下:

 
var evt = document.createEvent("MouseEvents"); 
evt.initEvent("click", false, false);// 或用initMouseEvent()，不過需要更多參數(shù) 
$("#aLink").get(0).dispatchEvent(evt); 

按以上方法來實(shí)現(xiàn)我想要的功能，代碼如下：

復(fù)制代碼代碼如下:

 
$(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()事件一樣，能觸發(fā)單擊事件，超鏈接卻沒有轉(zhuǎn)到目標(biāo)地址（注意：提交按鈕用此方法也是能夠提交的，我想jQuery的click()的實(shí)現(xiàn)大概是這樣實(shí)現(xiàn)的吧）。哎，覺得還是IE好。呵呵。

如此一來，這種方法仍然不能解決FireFox中的問題。得繼續(xù)尋找其他方法。

既然在fireFox中能夠觸發(fā)單擊事件，卻不能轉(zhuǎn)到超鏈接的目標(biāo)地址，那么，可以用js來實(shí)現(xiàn)跳轉(zhuǎn)，即：使用location對象。代碼如下：

復(fù)制代碼代碼如下:

 
$(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");也可以，但是執(zhí)行的時間不同 
            }); 

            // 觸發(fā)單擊事件 
            $("#aLink").click(); 
        } 
    }); 
}); 

這樣就大功告成。有一個地方要說明一下：document.location與window.location。這兩個都可以，然而他們的執(zhí)行時間不同，window的執(zhí)行時間較早。讀者可以自己試試。

雖然實(shí)現(xiàn)了這個例子，然而，運(yùn)用到項(xiàng)目中卻出問題了，因?yàn)轫?xiàng)目中使用了frameset（雖然現(xiàn)在很多人不建議使用frameset，但項(xiàng)目用了也沒辦法，得這樣做）。因此需要指定鏈接的目標(biāo)url在哪個frame中顯示，然而，通過<a>中的target是無法實(shí)現(xiàn)的，因?yàn)?lt;a>根本不會執(zhí)行默認(rèn)行為，需要通過js來實(shí)現(xiàn)。

我們知道，document代表當(dāng)前的頁面（當(dāng)前執(zhí)行元素所在頁面）。如果我們能夠找到當(dāng)前超鏈接的url希望放入的frame，我們就可以找到它對象的document。當(dāng)然找到超鏈接url希望放入的frame很容易，這是由你自己決定將其放到哪的。示例代碼如下：

復(fù)制代碼代碼如下:

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

其中，'view'是超鏈接url希望放入的frame的name或id（最好是id和name命名一樣）。建議IE中別用上面的方法，而用前面介紹的click()方法。

現(xiàn)在已經(jīng)解決了所有的問題。可能還有人會有這種需求：就是在<a>中寫上target，如<a target="_blank"></a>之類的。希望按target的要求觸發(fā)超鏈接。當(dāng)然，這是非IE瀏覽器有的問題。

實(shí)際上，下面我要介紹的方法是通用行的?？梢蕴娲鷚indow.parent.frames['view'].document.location。代碼如下：

復(fù)制代碼代碼如下:

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

如果沒有定義target屬性，默認(rèn)會當(dāng)成'_blank'處理，這與用戶單擊超鏈接的效果不一樣。這種方式是跨瀏覽器的，所以，只需要要用這種方式即可。這時，回到用jQuery+原始JavaScirpt來實(shí)現(xiàn)，這時最終、個人認(rèn)為最好的方法。完整最終代碼如下：

復(fù)制代碼代碼如下:

 
<!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")); 
                }); 

                // 觸發(fā)單擊事件（會執(zhí)行所有綁定的單擊事件處理函數(shù)） 
                $("#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="別點(diǎn)擊此按鈕提交" onclick="alert('觸發(fā)了提交按鈕的單擊事件！');"/> 
    </form> 
    <a id="aLink"  target="_self" onclick = "alert('觸發(fā)了超鏈接的單擊事件！');">代碼觸發(fā)超鏈接</a> 
</body> 

</html> 

復(fù)制代碼代碼如下:

 
<!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")); 
                }); 

                // 觸發(fā)單擊事件（會執(zhí)行所有綁定的單擊事件處理函數(shù)） 
                $("#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="別點(diǎn)擊此按鈕提交" onclick="alert('觸發(fā)了提交按鈕的單擊事件！');"/> 
    </form> 
    <a id="aLink"  target="_self" onclick = "alert('觸發(fā)了超鏈接的單擊事件！');">代碼觸發(fā)超鏈接</a> 
</body> 
</html> 

注意：需要此處需要先綁定一個click處理函數(shù)，然后再觸發(fā)click事件
總結(jié)：
網(wǎng)上有一些JavaScript模擬用戶單擊事件的文章，但是都不全面，總會有這樣那樣的問題。雖然，我在此列舉了眾多的方法，覺得基本的問題都應(yīng)該解決了，然而還是有可能有人遇到新的問題。如果遇到什么問題，可以跟我一起探討……

您可能感興趣的文章: