如何在锚点标记中以编程方式调用onclick（）事件，同时在onclick函数中保留“this”引用？

Posted 2021-05-03

是否可以以编程方式为锚标记调用onClick-event，同时保持对锚的'this'引用？

以下不起作用...（至少在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>

答案

你需要在该元素的上下文中使用apply事件处理程序：

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

否则this将引用执行上述代码的上下文。

另一答案

有一个非常简单的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中测试过。

另一答案

要触发事件，您基本上只需调用该元素的事件处理程序。您的代码稍有变化。

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

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

另一答案

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

另一答案

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

另一答案

看看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));

另一答案

如果您纯粹使用它来引用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'));
}

另一答案

一般来说，我建议不要“手动”调用事件处理程序。

• 由于多个注册的听众，不清楚会执行什么
• 进入递归和无限事件循环的危险（单击A触发单击B，触发单击A等）
• DOM的冗余更新
• 很难区分用户引起的视图中的实际更改与初始化代码所做的更改（应该只运行一次）。

更好的是弄清楚你想要发生什么，把它放在一个函数中并手动调用它并将其注册为事件监听器。