86

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

9 回答 9

116

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

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

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

于 2009-05-25T12:35:12.567 回答
22

解决这个问题的最好方法是使用 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 中测试。

于 2013-05-27T09:59:48.650 回答
15

要触发事件,您基本上只需调用该元素的事件处理程序。对您的代码稍作更改。

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

if (typeof(evnt) == "function") {
    evnt.call(a);
}
于 2009-05-25T12:21:46.090 回答
7

当然,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

于 2017-12-27T20:52:25.107 回答
6
$("#linkid").trigger("click");
于 2015-11-21T18:59:11.063 回答
4

旧线程,但问题仍然相关,所以......

(1) 您问题中的示例现在可以在 Firefox 中使用然而,除了调用事件处理程序(显示警报)之外,它还单击链接,导致导航(一旦警报被解除)。

(2)只需调用事件处理程序(不触发导航)只需替换:

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

document.getElementById('linkid').onclick();
于 2019-06-16T01:38:25.810 回答
1

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

“原始”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));
于 2016-01-22T17:30:54.220 回答
0

如果您纯粹使用它来引用 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'));
}
于 2009-05-25T12:33:08.967 回答
-1

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

  • 由于多个注册的侦听器,目前尚不清楚执行了什么
  • 进入递归和无限事件循环的危险(点击A触发点击B,触发点击A等)
  • 对 DOM 的冗余更新
  • 很难将由用户引起的视图中的实际更改与作为初始化代码所做的更改(应该只运行一次)区分开来。

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

于 2013-09-13T09:59:53.413 回答