17

基本上我正在尝试使用以下代码将自定义的鼠标单击事件发送到文本输入元素（请参阅此jsFiddle）：

function simulateClick(id) {
    var clickEvent = document.createEvent("MouseEvents");
    clickEvent.initMouseEvent("click", true, true, window, 1, 0, 0, 0, 0,
        false, false, false, false, 0, null);

    var element = document.getElementById(id);
    element.dispatchEvent(clickEvent);
}

当我在元素上运行该代码时，type="checkbox"它工作得非常好，但在元素上调用时它根本不起作用type="text"。

现在这是initMouseEvent()MDN 上的定义：

event.initMouseEvent(type, canBubble, cancelable, view, 
                 detail, screenX, screenY, clientX, clientY, 
                 ctrlKey, altKey, shiftKey, metaKey, 
                 button, relatedTarget);

所以在上面的例子中screenX, screenY, clientX，clientY所有的都是0（不过，上面的代码在复选框上工作得很好，无论它们的位置如何）。我尝试捕获真实事件并将屏幕和客户端坐标传递给自定义事件，但无济于事。

尽管出于安全原因，我可能文本输入元素会忽略自定义鼠标事件，但element.focus()它也不应该工作，它确实如此。

任何想法或见解将不胜感激！

4

1 回答 1

5

据我所知，您的代码工作正常。但是，它并没有像您想象的那样关注输入字段，而是在输入字段上触发事件就好了，如本小提琴所示：http: //jsfiddle.net/ENvZY/

注意：代码不是跨浏览器兼容的，它在 ie8 中失败。

考虑使用像 jQuery 这样的优秀跨浏览器库，而不是采用原生 DOM 方式 - 轮子存在并且完美运行，重新发明它是浪费时间 :)

于 2011-03-18T13:51:13.150 回答