首頁 > 開發者 > JavaScript
執行個體如下：
IE:
FireFox:
複製代碼 代碼如下:$(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" href="http://www.google.cn" 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" href="http://www.google.cn" target="_self" onclick = "alert('觸發了超連結的單擊事件！');">代碼觸發超連結</a>
</body>
</html>
注意：需要此處需要先綁定一個click處理函數，然後再觸發click事件
總結：
網上有一些JavaScript類比使用者單擊事件的文章，但是都不全面，總會有這樣那樣的問題。雖然，我在此列舉了眾多的方法，覺得基本的問題都應該解決了，然而還是有可能有人遇到新的問題。如果遇到什麼問題，可以跟我一起探討……
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
