如何在錨點標記中以編程方式調用onclick（）事件，同時在onclick函數中保留“this”引用？

Question

以下不起作用...（至少在Firefox中不起作用： document.getElementById('linkid').click()不是函數）

<script type="text/javascript">
    function doOnClick() {
        document.getElementById('linkid').click();
        //Should alert('/testlocation');
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

Answer 1

您需要在該元素的上下文中apply事件處理程序：

var elem = document.getElementById("linkid");
if (typeof elem.onclick == "function") {
    elem.onclick.apply(elem);
}

否則， this將引用執行上述代碼的上下文。

Answer 2

解決這個問題的最好方法是使用Vanilla JS，但如果你已經在使用jQuery，那么有一個非常簡單的解決方案：

<script type="text/javascript">
    function doOnClick() {
        $('#linkid').click();
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

在IE8-10，Chrome，Firefox中測試過。

Answer 3

要觸發事件，您基本上只需調用該元素的事件處理程序。 您的代碼稍有變化。

var a = document.getElementById("element");
var evnt = a["onclick"];

if (typeof(evnt) == "function") {
    evnt.call(a);
}

Answer 4

$("#linkid").trigger("click");

Answer 5

OP承認，OP非常類似地表示這不起作用，但它確實適用於我。 基於我的來源中的注釋，它似乎是在OP的帖子的時間或之后實現的。 也許它現在更標准。

document.getElementsByName('MyElementsName')[0].click();

在我的情況下，我的按鈕沒有ID。 如果您的元素具有id，則最好使用以下（未經測試）。

document.getElementById('MyElementsId').click();

我最初嘗試過這種方法並沒有用。 在谷歌搜索后，我回來並意識到我的元素是名字，並沒有ID。 仔細檢查你是否正在調用正確的屬性。

資料來源： https ： //developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Answer 6

看看handleEvent方法
https://developer.mozilla.org/en-US/docs/Web/API/EventListener

“Raw”Javascript：

function MyObj() {
   this.abc = "ABC";
}
MyObj.prototype.handleEvent = function(e) {
   console.log("caught event: "+e.type);
   console.log(this.abc);
}

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj);

現在單擊您的元素（ID為“myElement”），它應該在控制台中打印以下內容：

抓住事件：點擊
ABC

這允許您將對象方法作為事件處理程序，並且可以訪問該方法中的所有對象屬性。

你不能直接將對象的方法傳遞給addEventListener（就像那樣： element.addEventListener('click',myObj.myMethod); ）並期望myMethod就像我通常在對象上調用一樣。 我猜測傳遞給addEventListener的任何函數都以某種方式被復制而不是被引用。 例如，如果將事件偵聽器函數引用傳遞給addEventListener（以變量的形式），然后取消設置此引用，則在捕獲事件時仍會執行事件偵聽器。

另一個（更低優雅）解決方法，以傳遞一個方法事件偵聽器和STIL this ，仍然有訪問對象的事件偵聽器內屬性將是類似的東西：

// see above for definition of MyObj

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj.handleEvent.bind(myObj));

Answer 7

舊線程，但問題仍然相關，所以......

（1）在你的問題的例子現在這樣工作在Firefox。 但是，除了調用事件處理程序（顯示警報）之外，它還會單擊鏈接，從而導致導航（一旦警報被取消）。

（2） 只是調用該事件處理程序（沒有觸發導航）僅取代：

document.getElementById('linkid').click();

同

document.getElementById('linkid').onclick();

Answer 8

如果您純粹使用它來引用onclick屬性中的函數，這似乎是一個非常糟糕的主意。 內聯事件通常是一個壞主意。

我建議如下：

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

handler = function(){
   showHref(el);
}

showHref = function(el) {
   alert(el.href);
}

var el = document.getElementById('linkid');

addEvent(el, 'click', handler);

如果你想從其他javascript代碼調用相同的函數，模擬一個單擊調用該函數不是最好的方法。 考慮：

function doOnClick() {
   showHref(document.getElementById('linkid'));
}

Answer 9

一般來說，我建議不要“手動”調用事件處理程序。

• 由於多個注冊的聽眾，不清楚會執行什么
• 進入遞歸和無限事件循環的危險（單擊A觸發單擊B，觸發單擊A等）
• DOM的冗余更新
• 很難區分用戶引起的視圖中的實際更改與初始化代碼所做的更改（應該只運行一次）。

更好的是弄清楚你想要發生什么，把它放在一個函數中並手動調用它並將其注冊為事件監聽器。