|
|
實例如下：
效果圖
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="別點擊此按鈕提交" onclick="alert('觸發了提交按鈕的單擊事件！');"/>
</form>
<a id="aLink" onclick = "alert('觸發了超鏈接的單擊事件！');">代碼觸發超鏈接</a>
復制代碼 代碼如下:
$(function()
{
$("#btn").click(function()
{
$("#submit").click();
$("#aLink").click();
});
});
當單擊：Click Me按鈕時，先后彈出提交按鈕被單擊、超鏈接被單擊的對話框，這表明兩者的單擊事件都被觸發了。然而，從地址欄中可以看到，提交按鈕的單擊事件觸發后，執行了它的默認行為：提交表單；可是超鏈接的單擊事件觸發后，并沒有鏈接到目標地址。（不要懷疑說是提交按鈕的提交地址對超鏈接有影響，因為我去掉提交按鈕，只留下超鏈接也不會鏈接到目標地址。）
也許jQuery中的click()方法對超鏈接的單擊事件并沒有使其執行瀏覽器的默認行為（即使你手動加入return true也沒有用）。注意：tigger("click")與click()一樣的。jQuery文檔中說“這個函數也會導致瀏覽器同名的默認行為的執行”。同名的？不太明白，但是超鏈接的確不能執行它的默認行為。這是，只能想另外的方法――拋棄jQuery提供的事件。
回到JavaScript自己的事件――click。代碼如下：
復制代碼 代碼如下:
$(function()
{
$("#btn").click(function()
{
$("#submit").click();
$("#aLink").get(0).click();
});
});
在IE中一測試，通過了……有點興奮。可是，在fireFox中卻提示：click()不是一個function。說真的，IE瀏覽器提供的東西對開發人員來說很好，而fireFox卻沒有，比如之前說到的onpropertychange等。不過，我們必須的考慮IE之外的瀏覽器。在網上查資料，有不少人提到在fireFox中要用代碼觸發一個事件，需要如下處理：
復制代碼 代碼如下:
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);// 或用initMouseEvent()，不過需要更多參數
$("#aLink").get(0).dispatchEvent(evt);
按以上方法來實現我想要的功能，代碼如下：
復制代碼 代碼如下:
$(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對象。代碼如下：
復制代碼 代碼如下:
$(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很容易，這是由你自己決定將其放到哪的。示例代碼如下：
復制代碼 代碼如下:
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。代碼如下：
復制代碼 代碼如下:
window.open($(this).attr("href"),$(this).attr("target"));
如果沒有定義target屬性，默認會當成'_blank'處理，這與用戶單擊超鏈接的效果不一樣。這種方式是跨瀏覽器的，所以，只需要要用這種方式即可。這時，回到用jQuery+原始JavaScirpt來實現，這時最終、個人認為最好的方法。完整最終代碼如下：
復制代碼 代碼如下:
<!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" target="_self" onclick = "alert('觸發了超鏈接的單擊事件！');">代碼觸發超鏈接</a>
</body>
</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" target="_self" onclick = "alert('觸發了超鏈接的單擊事件！');">代碼觸發超鏈接</a>
</body>
</html>
注意：需要此處需要先綁定一個click處理函數，然后再觸發click事件
總結：
網上有一些JavaScript模擬用戶單擊事件的文章，但是都不全面，總會有這樣那樣的問題。雖然，我在此列舉了眾多的方法，覺得基本的問題都應該解決了，然而還是有可能有人遇到新的問題。如果遇到什么問題，可以跟我一起探討……
JavaScript技術：JavaScript 模擬用戶單擊事件，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
