'undefined' is not a function evaluating el.click() in Safari

Question

I would like to run a js function on pressing Enter button. Everything works great in IE, Chrome and Opera, but I get an error (explained below) in Safari.

I need a pure Javascript solution, not jQuery.

This is the function:

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();
    }
}

This is the HTML:

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

I get this error:

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

What am I doing wrong?

EDIT: I've fixed the Mozilla Firefox error.

Answer 1

If you take a look at the HTML DOM Level 2 Specification, the click() function is only defined for HTMLInputElement, so while certainly not very user-friendly Safari doesn't need to implement that.

The correct way to trigger an event for modern browsers is in 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);

Here's jsfiddle that works in Chrome, Safari, Firefox and IE9: http://jsfiddle.net/y5yW9/6/