web-dev-qa-db-ja.com

<input type = text>要素にマウスクリックでdispatchEvent（）することは可能ですか？

基本的に、次のコードを使用して、カスタムメイドのマウスクリックイベントをテキスト入力要素にディスパッチしようとしています（これを参照 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_になります（それでも、上記のコードは、位置に関係なくチェックボックスで完全に機能します）。実際のイベントをキャプチャして、画面とクライアントの座標をカスタムメイドのイベントに渡してみましたが、役に立ちませんでした。

セキュリティ上の理由から、テキスト入力要素はカスタムマウスイベントを無視するかもしれませんが、element.focus()も機能しないはずです。

どんなアイデアや洞察も大歓迎です！

javascriptmouseeventdispatchevent
16
Philip Kamenarsky

私が知る限り、あなたのコードはうまく機能します。ただし、ご想像のとおり、入力フィールドにフォーカスはありませんが、このフィドルに見られるように、イベントは入力フィールドで問題なく発生します。 http://jsfiddle.net/ENvZY/

注：コードはクロスブラウザー互換ではありませんが、ie8では失敗します。

ネイティブのDOMの方法ではなく、jQueryのような優れたクロスブラウザーライブラリを使用することを検討してください。ホイールは存在し、完全に機能します。再発明するのは時間の無駄です:)

5
Martin Jespersen