“未定义”不是 Safari 中评估 el.click() 的函数答案

【问题标题】：'undefined' is not a function evaluating el.click() in Safari“未定义”不是 Safari 中评估 el.click() 的函数
【发布时间】：2012-10-05 10:22:04
【问题描述】：

我想在按下 Enter 按钮时运行一个 js 函数。在 IE、Chrome 和 Opera 中一切正常，但在 Safari 中出现错误（解释如下）。

我需要一个纯 Javascript 解决方案，不是 jQuery。

这是函数：

function pressSearch(e) {
    if (typeof e == 'undefined' && window.event) {
        e = window.event;
    }
    var charCode = (e.which) ? e.which : 
                   ((e.charCode) ? e.charCode : 
                   ((e.keyCode) ? e.keyCode : 0));
    if (charCode == 13) {
        document.getElementById('enterSearch').click();
    }
}

这是HTML：

<input type="text" id="searchKey" onkeypress="pressSearch(event)">
<div id="enterSearch">Search</div> // This is the "button"

我收到此错误：

// Safari
TypeError: 'undefined' is not a function 
    (evaluating 'getElementById('enterSearch').click()')

我做错了什么？

编辑：我已经修复了 Mozilla Firefox 错误。

【问题讨论】：

我将您的代码复制并粘贴到 Firefox 中，但没有出现错误...您能提供live demo吗？
我投了赞成票只是因为“我不想要 jQuery”这一行。

标签： javascript

【解决方案1】：

如果你看一下HTML DOM Level 2 Specification，click() 函数只是为HTMLInputElement 定义的，所以虽然不是很友好，但 Safari 并不需要实现它。

现代浏览器触发事件的正确方法是在DOM Level 3 Events:

// First create an event
var click_ev = document.createEvent("MouseEvents");
// initialize the event
click_ev.initEvent("click", true /* bubble */, true /* cancelable */);
// trigger the event
document.getElementById("someElement").dispatchEvent(click_ev);

这是适用于 Chrome、Safari、Firefox 和 IE9 的 jsfiddle：http://jsfiddle.net/y5yW9/6/

【讨论】：

我已经尝试过这个 creatEvent 但它不适用于您提到的 IE8。但是，如果我必须为 IE8 或任何其他选项运行此事件，还有什么其他选择。因为我被这种情况困住了。如果你能给我答案，谢谢

【解决方案2】：

您在 div 上触发了一个点击事件，该事件没有隐式点击处理程序。

【讨论】：

【解决方案3】：

我在处理 a similar problem 时遇到了同样的问题。我想出的是在 safari（当然也包括其他浏览器）中触发点击事件的以下内容：

var t = document.getElementById('someidhere');
if (document.dispatchEvent) {
    var e = new MouseEvent('click', {
        view: window,    // Window associated with the event
        bubbles: true,
        cancelable: true
    });
    t.dispatchEvent(e);
} else if (document.fireEvent) {
    t.fireEvent('onclick');
} else if (t.click) {
    t.click();
}

根据@Dennis，您的代码已经适用于 Firefox，但是从 79.0 版（测试它的版本）开始，此代码应该在 Firefox 中运行。

请注意，initEvent() 已被弃用。然而，在 Internet Explorer 中通过 Event 构造函数 doesn't work 创建事件的新方法。

【讨论】：

你的意思是 if (t.click()) 还是 if (t.click) ？
@PaulBrannan 已修复，并在其他方面进行了更新。

【解决方案4】：

默认情况下，div 元素没有定义单击事件处理程序。因此，首先您需要为 enterSearch div 应用点击事件，例如<div id="enterSearch" onclick="submitSearch()">Search</div>。否则按钮本身将无法点击。

要以编程方式执行事件，请使用以下构造：

function pressSearch(e) {
    if (typeof e == 'undefined' && window.event) {
        e = window.event;
    }

    var charCode = (e.which) ? e.which : ((e.charCode) ? e.charCode : ((e.keyCode) ? e.keyCode : 0));
    if (charCode == 13) {
        var a = document.getElementById('enterSearch');

        if (typeof a.onclick == "function") {
            a.onclick.apply(a); // binds the scope of onclick to a
        }
    }
}

我无法为 IE 验证这个，但它适用于 Safari。

【讨论】：

这不适用于通过“addEventListener”添加的事件处理程序。
但是 addEventListener 甚至不适用于 IE。因此，如果可能的话，我推荐“老式”的方式。或者，必须插入一个 IE-Others 开关才能以编程方式绑定事件。
好的，当以编程方式使用事件绑定时，Daedalus 的解决方案似乎是最通用的。使用它。

【解决方案5】：

getElementById('enterSearch')

应该是document.getElementById('enterSearch')

【讨论】：

我的真实代码中有document.blabla，但它不起作用