JavaScript 模擬用戶單擊事件
更新時(shí)間：2009年12月31日 20:13:49 作者：
單擊一個(gè)按鈕或超鏈接，然后會出現(xiàn)其他的超鏈接，這時(shí)要讓其中的一個(gè)超鏈接被單擊，以顯示一個(gè)初始頁面。（公司頁面使用了frameset）很顯然，之后的超鏈接單擊事件需要通過JavaScript來觸發(fā)。
一開始，我想到了用jQuery的click()事件來觸發(fā)超鏈接的單擊事件（與trigger("click")一樣的效果）。結(jié)果發(fā)現(xiàn)不如人意。
實(shí)例如下：
效果圖
IE:
<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>
$(function()
{
$("#btn").click(function()
{
$("#submit").click();
$("#aLink").click();
});
});
當(dāng)單擊：Click Me按鈕時(shí)，先后彈出提交按鈕被單擊、超鏈接被單擊的對話框，這表明兩者的單擊事件都被觸發(fā)了。然而，從地址欄中可以看到，提交按鈕的單擊事件觸發(fā)后，執(zhí)行了它的默認(rèn)行為：提交表單；可是超鏈接的單擊事件觸發(fā)后，并沒有鏈接到目標(biāo)地址。（不要懷疑說是提交按鈕的提交地址對超鏈接有影響，因?yàn)槲胰サ籼峤话粹o，只留下超鏈接也不會鏈接到目標(biāo)地址。）
也許jQuery中的click()方法對超鏈接的單擊事件并沒有使其執(zhí)行瀏覽器的默認(rèn)行為（即使你手動加入return true也沒有用）。注意：tigger("click")與click()一樣的。jQuery文檔中說“這個(gè)函數(shù)也會導(dǎo)致瀏覽器同名的默認(rèn)行為的執(zhí)行”。同名的？不太明白，但是超鏈接的確不能執(zhí)行它的默認(rèn)行為。這是，只能想另外的方法——拋棄jQuery提供的事件。
回到JavaScript自己的事件——click。代碼如下：
$(function()
{
$("#btn").click(function()
{
$("#submit").click();
$("#aLink").get(0).click();
});
});
在IE中一測試，通過了……有點(diǎn)興奮?？墒牵趂ireFox中卻提示：click()不是一個(gè)function。說真的，IE瀏覽器提供的東西對開發(fā)人員來說很好，而fireFox卻沒有，比如之前說到的onpropertychange等。不過，我們必須的考慮IE之外的瀏覽器。在網(wǎng)上查資料，有不少人提到在fireFox中要用代碼觸發(fā)一個(gè)事件，需要如下處理：
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);// 或用initMouseEvent()，不過需要更多參數(shù)
$("#aLink").get(0).dispatchEvent(evt);
按以上方法來實(shí)現(xiàn)我想要的功能，代碼如下：
$(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);
}
});
});
這時(shí)，在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對象。代碼如下：
$(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í)行的時(shí)間不同
});
// 觸發(fā)單擊事件
$("#aLink").click();
}
});
});
這樣就大功告成。有一個(gè)地方要說明一下：document.location與window.location。這兩個(gè)都可以，然而他們的執(zhí)行時(shí)間不同，window的執(zhí)行時(shí)間較早。讀者可以自己試試。
雖然實(shí)現(xiàn)了這個(gè)例子，然而，運(yùn)用到項(xiàng)目中卻出問題了，因?yàn)轫?xiàng)目中使用了frameset（雖然現(xiàn)在很多人不建議使用frameset，但項(xiàng)目用了也沒辦法，得這樣做）。因此需要指定鏈接的目標(biāo)url在哪個(gè)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很容易，這是由你自己決定將其放到哪的。示例代碼如下：
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。代碼如下：
window.open($(this).attr("href"),$(this).attr("target"));
如果沒有定義target屬性，默認(rèn)會當(dāng)成'_blank'處理，這與用戶單擊超鏈接的效果不一樣。這種方式是跨瀏覽器的，所以，只需要要用這種方式即可。這時(shí)，回到用jQuery+原始JavaScirpt來實(shí)現(xiàn)，這時(shí)最終、個(gè)人認(rèn)為最好的方法。完整最終代碼如下：
<!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>
<!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>
注意：需要此處需要先綁定一個(gè)click處理函數(shù)，然后再觸發(fā)click事件
總結(jié)：
網(wǎng)上有一些JavaScript模擬用戶單擊事件的文章，但是都不全面，總會有這樣那樣的問題。雖然，我在此列舉了眾多的方法，覺得基本的問題都應(yīng)該解決了，然而還是有可能有人遇到新的問題。如果遇到什么問題，可以跟我一起探討……
實(shí)例如下：
效果圖
IE:
FireFox: 
復(fù)制代碼 代碼如下:
<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按鈕時(shí)，先后彈出提交按鈕被單擊、超鏈接被單擊的對話框，這表明兩者的單擊事件都被觸發(fā)了。然而，從地址欄中可以看到，提交按鈕的單擊事件觸發(fā)后，執(zhí)行了它的默認(rèn)行為：提交表單；可是超鏈接的單擊事件觸發(fā)后，并沒有鏈接到目標(biāo)地址。（不要懷疑說是提交按鈕的提交地址對超鏈接有影響，因?yàn)槲胰サ籼峤话粹o，只留下超鏈接也不會鏈接到目標(biāo)地址。）
也許jQuery中的click()方法對超鏈接的單擊事件并沒有使其執(zhí)行瀏覽器的默認(rèn)行為（即使你手動加入return true也沒有用）。注意：tigger("click")與click()一樣的。jQuery文檔中說“這個(gè)函數(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()不是一個(gè)function。說真的，IE瀏覽器提供的東西對開發(fā)人員來說很好，而fireFox卻沒有，比如之前說到的onpropertychange等。不過，我們必須的考慮IE之外的瀏覽器。在網(wǎng)上查資料，有不少人提到在fireFox中要用代碼觸發(fā)一個(gè)事件，需要如下處理：
復(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);
}
});
});
這時(shí)，在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í)行的時(shí)間不同
});
// 觸發(fā)單擊事件
$("#aLink").click();
}
});
});
這樣就大功告成。有一個(gè)地方要說明一下：document.location與window.location。這兩個(gè)都可以，然而他們的執(zhí)行時(shí)間不同，window的執(zhí)行時(shí)間較早。讀者可以自己試試。
雖然實(shí)現(xiàn)了這個(gè)例子，然而，運(yùn)用到項(xiàng)目中卻出問題了，因?yàn)轫?xiàng)目中使用了frameset（雖然現(xiàn)在很多人不建議使用frameset，但項(xiàng)目用了也沒辦法，得這樣做）。因此需要指定鏈接的目標(biāo)url在哪個(gè)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'處理，這與用戶單擊超鏈接的效果不一樣。這種方式是跨瀏覽器的，所以，只需要要用這種方式即可。這時(shí)，回到用jQuery+原始JavaScirpt來實(shí)現(xiàn)，這時(shí)最終、個(gè)人認(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>
注意：需要此處需要先綁定一個(gè)click處理函數(shù)，然后再觸發(fā)click事件
總結(jié)：
網(wǎng)上有一些JavaScript模擬用戶單擊事件的文章，但是都不全面，總會有這樣那樣的問題。雖然，我在此列舉了眾多的方法，覺得基本的問題都應(yīng)該解決了，然而還是有可能有人遇到新的問題。如果遇到什么問題，可以跟我一起探討……
相關(guān)文章
這篇文章主要介紹了JS瀏覽器BOM常見操作,結(jié)合實(shí)例形式詳細(xì)分析了JS瀏覽器BOM模型元素常見操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-04-04
教你巧用?import.meta?實(shí)現(xiàn)熱更新的問題
import.meta?是一個(gè)給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對象，它包含了這個(gè)模塊的信息，這篇文章主要介紹了巧用?import.meta?實(shí)現(xiàn)熱更新的問題,需要的朋友可以參考下2022-04-04
本文主要介紹了js實(shí)現(xiàn)一鍵復(fù)制功能的方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
JavaScript實(shí)現(xiàn)存儲HTML字符串示例
這篇文章主要介紹了JavaScript存儲HTML字符串的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
JavaScript判斷對象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的方法
這篇文章主要給大家介紹了關(guān)于JavaScript判斷對象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的相關(guān)資料,我們在實(shí)際的開發(fā)過程中,經(jīng)常需要判斷對象/數(shù)組是否包含某個(gè)屬性或者某個(gè)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了js分頁工具及其具體用法,包括js與css的詳細(xì)實(shí)現(xiàn)代碼與使用方法,需要的朋友可以參考下2015-01-01
由于現(xiàn)在很多瀏覽器版本，那么多瀏覽器兼容的設(shè)為首頁與加入收藏功能代碼，就比較好用，這里簡單的整理下，方便需要的朋友2012-12-12
這篇文章主要為大家詳細(xì)介紹了原生小程序封裝跑馬燈效果，由多條銜接改動得到，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
本文給大家分享的是使用純JS實(shí)現(xiàn)的簡單的拖拽效果的插件，算是對自己javascript學(xué)習(xí)的一個(gè)小的檢驗(yàn)，如果小伙伴們需要復(fù)雜的拖拽效果，還是考慮jQuery的draggable吧，更成熟一些。2015-03-03
javascript event在FF和IE的兼容傳參心得(絕對好用)
event在IE和FF不兼，下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下2014-07-07