JavaScript ile bir tıklamayı nasıl taklit edebilirim?


293

Sadece bir öğeye tıklamayı simüle etmek için JavaScript'i nasıl kullanabileceğimi merak ediyorum.

Şu anda var:

<script type="text/javascript">
function simulateClick(control)
{
    if (document.all)
    {
        control.click();
    }
    else
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
        control.dispatchEvent(evObj);
    }
}
</script>

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

Ama işe yaramıyor :(

Herhangi bir fikir?


9
"En Yaygın Beş Kodlama Hatası": javascript.about.com/od/hintsandtips/a/worst_4.htm - Hemen hemen hiç kimse IE4'ü çalıştırmıyor ve bu nedenle document.all DOM için artık destek gerekli değil. Yine de kodlamalarında kaç kişinin kullandığı gerçekten şaşırtıcı. Daha da kötüsü, belgenin desteklenmesidir. Tüm DOM, kullanılan tarayıcıyı belirlemek için sıklıkla test edilir ve destekleniyorsa, kod tarayıcının Internet Explorer olduğunu varsayar ( Opera , DOM'u da tanıdığı için tamamen yanlış kullanımdır ) .
zaf

Yanıtlar:


418

İşte pişirdiğim şey. Oldukça basit, ama işe yarıyor:

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);
  }
}

Kullanımı:

eventFire(document.getElementById('mytest1'), 'click');

12
@Anderson Green: Bu jsfiddle'a bir örnek ekledim: jsfiddle.net/KooiInc/W4BHD
KooiInc 19:13

4
Bunun işe yaradığının kanıtı (Chromium'da): +1 ile document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)
PointedEars

58
Java-script'inizi oylama düğmesi üzerinde denedim :) (elbette çalıştı)
0fnt

1
Kesin kullanıcı davranışlarını simüle etmek için yerleştirilmeli dispatchEventya clicksahip çağırmaları setTimeouto göründüğü gibi, dispatchEventbir senkron .
Lev Kazakov

16
Event.initEventşimdi olduğu kaldırılmış developer.mozilla.org/en/docs/Web/API/Event/initEvent
artnikpro

394

Basit bir şeye ne dersiniz:

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

IE tarafından bile desteklenir .


@HermannIngjaldsson Evet, IE'de mükemmel çalışıyor - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
Darren Sweeney

6
Soru "bu da işe yarıyor mu?" - cevap evet - AFAIK en az 8'e düştü, kontrol etmedim 7
Darren Sweeney

24
Bu daha önce yoktu mı? 2010 yanıtları neden bu basit çözümden bahsetmedi? Sadece merak ediyorum ...
Parth

3
@ NinoŠkopac Şu anda masaüstü için harika çalışıyor ancak mobil tarayıcılarla çalışma garantisi yok. Mozilla geliştirici sitesi bile mobil destek göstermiyor.
le0diaz

8
@Parth Belki de öyleydi, sadece onlar için tıklamadı .
Andrew

78

Tüm tarayıcı algılamasını önlemek için jQuery kullanmayı düşündünüz mü? JQuery ile, bu kadar basit olurdu:

$("#mytest1").click();

21
Bu, yalnızca davranış jQuery olay işleyicileri değil, varsayılan davranıştır (bu durumda tarayıcı href'e gider)
Romuald Brunet

12
Üzgün ​​hakkında bilmiyorum ama aynı tarayıcı algılama rutinleri tekrar tekrar kayıt tutmak zorunda kalmamak için uygun olabilir emin olabilirsiniz.
BradBrening

9
@ErikAigner: Aynı şeyi merak ediyordum, ancak bu durumda kabul edilen cevabın jQuery değil, düz JavaScript olduğundan memnunum. Bunu SO'da çok fazla gördüm. Bir kez daha: jQuery JavaScript, ancak JavaScript jQuery değil. Her ne kadar jQuery kullanmayı sevsem de, geliştiricilerin gerçek sade şeyi anlamadığını giderek daha fazla görüyorum. Benim 2 sent, yorum yapmak için dayanamadı. ;)
Sander

58
Ayrıca, kıyafetlerini elle yıkamak zorunda kaldıklarında nereden başlayacaklarını bilmeyen birçok insan var, çünkü hane halklarının çoğunun bir yıkayıcısı var ve neredeyse çoğunun bir çamaşır kurutma makinesi var. jQuery, tıpkı modern cihazlar gibi eski bir angaryayı daha kolay ve daha az hataya eğilimli hale getirdi. Bu herkes için bir çözüm değildir, ancak çapraz tarayıcı uyumlu olurken soruyu daha kısa ve anlaşılır bir sözdizimi kullanarak doğru bir şekilde cevaplayan bir cevabı küçümsemek geriye doğru görünüyor. +1.
FreeAsInBeer

2
@FreeAsInBeer O zaman hiçbir yerde yürümemelisiniz çünkü sürüş çok daha kolaydır. Ama bunun saçma olduğunu biliyoruz. Uzaklara gitmene gerek yoksa yürüyorsun. Basit bir şey yapmanız gerekiyorsa ve bunu yapmak için tüm kitaplığı yüklemek istemiyorsanız, düz JavaScript kullanırsınız. Basit bir şey için gaz / bant genişliği israfına gerek yok.
Jacob Alvarez

18
var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

Referans


Bunun bugünlerde en iyi cevap olması gerektiğine inanıyorum
DavidTaubmann

15

JQuery kullanarak kendinize bir sürü yerden tasarruf edebilirsiniz. Yalnızca aşağıdakileri kullanmanız gerekir:

$('#myElement').trigger("click")

10
OP JavaScript istedi. Bu kompakt ve işlevsel olmasına rağmen, bazı insanlar jQuery gibi şeylere nazaran Kütüphane no JS tercih eder.
Karkas

43
JQuery indirerek yerden tasarruf?
MH

9
Bazı insanlar da montajı tercih ediyor.
Dan Nissenbaum

@MH Bence daha geçerli bir argüman "basit tutmak" olurdu. SO'daki varsayılan profiliniz yaklaşık aynı boyutta jQuery'dir.
adelriosantiago

7

En iyi cevap en iyisidir! Ancak, Firefox'ta benim için fare olaylarını tetiklemiyordu etype = 'click'.

Yani, ben değiştim document.createEventiçin 'MouseEvents've bu sorunu giderildi. Ek kod, başka bir kod bitinin olaya müdahale edip etmediğini test etmektir ve iptal edildiğinde bunu konsola kaydederim.

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.