Question

基本上我正在尝试使用以下代码将自定义鼠标单击事件发送到文本输入元素（请参阅此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"元素上调用它时根本不起作用。

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

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

因此，在上面的示例中，screenX, screenY, clientX和clientY都是0（仍然，上面的代码与复选框完美匹配，无论其位置如何）。我尝试捕获一个真实的事件并将屏幕和客户端坐标传递给cusom制作的事件，但无济于事。

我可能由于安全原因，文本输入元素可能会忽略自定义鼠标事件，但是element.focus()也不应该这样做。

非常感谢任何想法或见解！

Answer 1

据我所知，你的代码运行正常。但是它并没有像你想象的那样聚焦输入字段，但事件在输入字段上被触发就好了，如这个小提琴所示：http://jsfiddle.net/ENvZY/

注意：代码不兼容crossbrowser，但在ie8中失败。

考虑使用像jQuery这样的好的交叉浏览器库，而不是采用本机DOM方式 - 轮子存在且工作完美，重新发明它是浪费时间：）

是否可以通过dispatchEvent（）鼠标单击<input type =“text”/>元素？

1 个答案: