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 では失敗します。

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

于 2011-03-18T13:51:13.150 に答える