web-dev-qa-db-ja.com

非ボタン要素からボタンクリックをトリガーする

ネイティブのクリック可能な動作がないと思われる要素からクリックイベントをどのようにトリガーしますか？

たとえば、次のコードを使用するだけでよいことを知っています。

document.getElementById('x').click();

しかし、「x」が「DIV」の場合はどうなりますか？実装がありますが、トリガーされないようです...エラーが表示されます（chrome 12）：

Uncaught TypeError: Object #<HTMLDivElement> has no method 'click'

アイデア？

クイック編集-私はここでバニラJSを探しています...私はイメージのホイールを再発明するのが好きです... :-)

javascripthtmlclick
16
Abhishek

ボタンやリンクなどの従来のクリック可能な要素の場合、click()はすべてのブラウザーで機能するはずです。ただし、divのような他の要素については、一部のブラウザーではonclick()が必要で、その他のブラウザーではclick()が必要です。

これを自分で理解しようとするのではなく、 MooTools 、 jQuery 、 Prototype 、-などのJavaScriptライブラリを使用することを強くお勧めします [〜＃〜] yui [〜＃〜] 、またはその他多数。その理由は、これをブラウザ間で正しく取得することがhardであるためです。他の人が正しく作業し、それを正しく使いやすくするために時間を無駄にしているのはなぜですか？フレームワークの使い方を学ぶことに時間を費やせば、JavaScript開発スキルをより速く習得できることを保証します。後で戻って、必要に応じて要点をすべて確認することができます。

つまり、次のスクリプトはクロスブラウザーで機能し、これらのプロパティのどちらにも関数が割り当てられていない場合は何もしません。

_el = document.getElementById('id');
if (el.onclick) {
   el.onclick();
} else if (el.click) {
   el.click();
}
_

これを行うこともできますが、おそらくこれは少し明確ではありません。

_(el.onclick || el.click || function() {})();
_

Divでクリックイベントを発生させるいくつかの経験的テスト：

  • Firefox 3および4はonclickを使用します。
  • IE7、8は両方を使用します。
  • Chromeはonclickを使用します（v。12.0.742.100で確認済み）。
  • IOs 4.2.1を搭載したiPhone 4のSafariはonclickを使用します。

テストスクリプト：

_var d = document.createElement('div'); d.style.position = 'absolute'; d.style.top = '0'; d.style.left = '0'; d.style.width = '200px'; d.style.height = '200px'; d.style.backgroundColor = '#fff'; d.style.border = '1px solid black'; d.onclick = function() {alert('hello');}; document.body.appendChild(d);
_

これをブラウザーの開発者ツールで実行するか、前に_javascript:_、最後にvoid(0);を実行し、アドレスバーに貼り付けてEnterキーを押します。次に、d.click()とd.onclick()を試してください。 div自体をクリックして、実際のクリックでも機能することを確認できます。

27
ErikE

プログラムでイベントを実際にトリガーする場合は、これを使用します。

function eventFire(el, etype){
  if (el.fireEvent) {
   (el.fireEvent('on' + etype));
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}
//usage
eventFire(document.getElementById('x'),'click');
6
KooiInc

異なるブラウザー（非html5 doctypeを使用）が異なるdomメソッドをサポートできるため、機能を検出する必要があります。

var ele = document.getElementById('x');
if(typeof ele.click == 'function') {
  ele.click()
} else if(typeof ele.onclick == 'function') {
  ele.onclick()
}
5
Ben Rowe

Onclickメソッドは何にでもアタッチできますが、実際の要素自体にイベントがアタッチされていない場合、エラーになるか、単に何もしません。

var el = document.getElementById('x');
el.onclick = function() { //do something };
el.click();
1
Jordan

ストックAndroidブラウザーで.clickメソッドを使用しようとしたときに、同様の問題が発生しました。clickを$('selector').on('click', cb);に置き換えると問題が解決するようです。

0
ronalddddd

次のようなことを試してください：

var my_div = document.getElementById('x');
my_div.onclick = function() {
   alert('hello world');
}
0
Aaron Hathaway