Question

是否可以以编程方式为锚标记调用onClick事件，同时保持对锚的'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>

Answer 1

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

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

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

Answer 2

使用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的帖子的时间或之后实现的。也许它现在更加标准化了。

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

＆＃34;原料＆＃34;使用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为＃34; myElement＆＃34;），它应该在控制台中打印以下内容：

抓住事件：点击
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

如果您纯粹使用它来引用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 8

旧线程，但是问题仍然存在，所以...

（1）您问题中的示例现在确实可在Firefox中运行。但是，除了调用事件处理程序（显示警报）之外，它还 ALSO 单击链接，从而导致导航（一旦警报被解除）。

（2）要只需调用事件处理程序（无需触发导航），只需替换：

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

使用

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

Answer 9

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

目前还不清楚因多次注册而被执行的内容听众
进入递归和无限事件循环的危险（单击A 触发单击B，触发单击A等。）
DOM的冗余更新
很难区分用户导致的视图中的实际更改与初始化代码所做的更改（应该只运行一次）。

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

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

9 个答案: