如何模擬單擊錨標記？
[英]How can I simulate a click to an anchor tag?
問題描述
我想模擬點擊一個錨標記，其中包含正確的目標處理等所有額外內容。
對於錨點的DOM對象似乎有一個“[click（）] [3]”方法，但並非所有瀏覽器都支持它。 Firefox拋出此錯誤：
錯誤：anchorObj.click不是函數
它在Opera 10和Konqueror上也很奇怪，當它在周圍div的onclick處理程序中調用時會導致無限點擊。 我想只有IE8可以正常使用它。 無論如何我不想要它，因為主流瀏覽器大多數都有問題。
我在Mozilla論壇中找到了Firefox的替代解決方案：
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
anchorObj.dispatchEvent(evt);
這對我來說似乎太丑陋了。 我不知道它是多么兼容，我想盡可能避免編寫特定於瀏覽器的代碼。
我不能使用location.href = anchorObj.href; 因為它不處理“目標”屬性。 我可以根據目標值進行一些硬編碼，但我也想避免這種情況。
有建議切換到JQuery，但我不知道它處理目標屬性有多好，因為我之前沒有使用它。
5 個解決方案
解決方案1
63 已采納 2009-09-14 14:37:00
這是一個完整的測試用例，模擬click事件，調用附加的所有處理程序（但它們已被附加），維護"target"屬性（IE中的"srcElement" ），像普通事件一樣的氣泡，並模擬IE的遞歸 -預防。 在FF 2，Chrome 2.0，Opera 9.10以及IE（6）中測試過：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function fakeClick(event, anchorObj) {
if (anchorObj.click) {
anchorObj.click()
} else if(document.createEvent) {
if(event.target !== anchorObj) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var allowDefault = anchorObj.dispatchEvent(evt);
// you can check allowDefault for false to see if
// any handler called evt.preventDefault().
// Firefox will *not* redirect to anchorObj.href
// for you. However every other browser will.
}
}
}
</script>
</head>
<body>
<div onclick="alert('Container clicked')">
<a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a>
</div>
<button type="button" onclick="fakeClick(event, document.getElementById('link'))">
Fake Click on Normal Link
</button>
<br /><br />
<div onclick="alert('Container clicked')">
<div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div>
</div>
<button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button>
</body>
</html>
它通過檢查事件的target屬性（ 在傳播期間保持不變 ）來檢查啟動模擬點擊的事件對象，從而避免非IE瀏覽器中的遞歸。
IE顯然在內部持有對其全局event對象的引用。 DOM級別2沒有定義這樣的全局變量，因此模擬器必須傳入其本地event副本。
解決方案2
11 2009-09-14 14:04:22
好吧，你可以通過jQuery快速測試點擊調度
$('#link-id').click();
如果您仍然遇到點擊尊重目標的問題，您可以隨時執行此操作
$('#link-id').click( function( event, anchor )
{
window.open( anchor.href, anchor.target, '' );
event.preventDefault();
return false;
});
解決方案3
11 2009-09-14 14:05:38
引用自https://developer.mozilla.org/en/DOM/element.click
click方法旨在與按鈕，復選框，無線電，重置或提交類型的INPUT元素一起使用。 Gecko沒有對可能期望響應鼠標點擊的其他元素（如鏈接（A元素））實現click方法，也不會觸發其他元素的click事件。
非Gecko DOM可能表現不同。
不幸的是，聽起來您已經發現了解決問題的最佳方案。
作為旁注，我同意你的解決方案看起來不太理想，但是如果你將一個功能封裝在一個方法中（就像JQuery會做的那樣），那就不是那么糟糕了。
解決方案4
6 2017-04-11 16:20:22
有一種更簡單的方法來實現它，
HTML
<a href="https://getbootstrap.com/" id="fooLinkID" target="_blank">Bootstrap is life !</a>
JavaScript的
// Simulating click after 3 seconds
setTimeout(function(){
document.getElementById('fooLinkID').click();
}, 3 * 1000);
使用普通的javascript來模擬點擊以及尋址目標屬性。
您可以在jsFiddle上查看這里的工作示例。
解決方案5
0 2018-06-12 06:11:54
上述解決方案均未解決原始請求的一般意圖。 如果我們不知道錨點的id怎么辦？ 如果它沒有id怎么辦？ 如果它甚至沒有href參數（例如旋轉木馬中的上一個/下一個圖標）怎么辦？ 如果我們想以不可知的方式將動作應用於具有不同模型的多個錨點，該怎么辦？ 這是一個做一些事情而不是點擊的例子，然后模擬點擊（對於任何錨點或其他標簽）：
var clicker = null;
$('a').click(function(e){
clicker=$(this); // capture the clicked dom object
/* ... do something ... */
e.preventDefault(); // prevent original click action
});
clicker[0].click(); // this repeats the original click. [0] is necessary.
如何通過JavaScript在iframe中模擬錨定點擊？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.