Bir JavaScript etkinliği tıklamasını nasıl tetikleyebilirim

Sayfamda bir köprü var. Sınama amacıyla köprü birkaç tıklama otomatikleştirmek çalışıyorum. JavaScript kullanarak köprüde 50 tıklamayı simüle etmenin bir yolu var mı?

<a href="#" target="_blank" onclick="javascript:Test("Test");">MSDN</a>

JavaScript onClick olay tetikleyici arıyorum.

Bir HTML öğesine tek bir tıklama gerçekleştirme: Basitçe yapın element.click(). Çoğu büyük tarayıcı bunu desteklemektedir .

Tıklamayı bir kereden fazla tekrarlamak için: Öğeyi benzersiz bir şekilde seçmek için bir kimlik ekleyin:

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

ve .click()JavaScript kodunuzdaki yöntemi bir for döngüsü ile arayın :

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();

GÜNCELLEME

Bu eski bir cevaptı. Günümüzde sadece tıklama kullanmalısınız . Daha gelişmiş olay tetikleme için dispatchEvent kullanın .

const body = document.body;

body.addEventListener('click', e => {
  console.log('clicked body');
});

console.log('Using click()');
body.click();

console.log('Using dispatchEvent');
body.dispatchEvent(new Event('click'));

Orijinal Yanıt

İşte kullandığım şey: http://jsfiddle.net/mendesjuan/rHMCy/4/

IE9 + ile çalışmak üzere güncellendi

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9){
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

     if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
            case "mousedown":
            case "mouseup":
                eventClass = "MouseEvents";
                break;

            case "focus":
            case "change":
            case "blur":
            case "select":
                eventClass = "HTMLEvents";
                break;

            default:
                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
                break;
        }
        var event = doc.createEvent(eventClass);
        event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
        // IE-old school style, you can drop this if you don't need to support IE8 and lower
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Aramanın fireEvent(inputField, 'change');, giriş alanını gerçekten değiştireceği anlamına gelmediğini unutmayın . Bir change olayını tetiklemek için tipik kullanım örneği, bir alanı programlı olarak ayarladığınızda ve çağrı input.value="Something"bir change olayını tetiklemeyeceğinden olay işleyicilerinin çağrılmasını istediğiniz durumdur .

Ne

 l.onclick();

does tam olarak onclickişlevini çağırıyor l, yani, ile bir ayarladıysanız l.onclick = myFunction;. Eğer ayarlamadıysanız l.onclick, hiçbir şey yapmaz. Tersine,

 l.click();

bir tıklamayı simüle eder ve l.addEventHandler('click', myFunction);HTML ile veya başka bir şekilde eklenmiş olsun tüm etkinlik işleyicilerini tetikler .

Çok fazla yanlış veya açıklanmamış kısmi uygulanabilirlikten dolayı çok utanıyorum.

Bunu yapmanın en kolay yolu Konsolu kullanarak Chrome veya Opera (örneklerim Chrome kullanacak). Konsola aşağıdaki kodu girin (genellikle 1 satırda):

var l = document.getElementById('testLink');
for(var i=0; i<5; i++){
  l.click();
}

Bu, gerekli sonucu üretecektir

.click()Android ile çalışmaz ( mobil bölümdeki Mozilla dokümanlarına bakın). Click olayını şu yöntemle tetikleyebilirsiniz:

function fireClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

Gönderen bu yazı

Test çerçevesi kullanma

Bu yardımcı olabilir - http://seleniumhq.org/ - Selenium bir web uygulaması otomatik test sistemidir.

Firefox eklentisi Selenium IDE'yi kullanarak testler oluşturabilirsiniz

Olayların elle ateşlenmesi

Olayları manuel olarak doğru şekilde tetiklemek için farklı tarayıcılar için farklı yöntemler kullanmanız gerekir - Çapa öğeniz ya el.dispatchEventda el.fireEventnerede elolacaktır. Her ikisinin de geçmek için bir Event nesnesi oluşturmayı gerektireceğine inanıyorum.

Tamamen doğru olmayan, çabuk ve kirli bir yol alternatif olacaktır:

var el = document.getElementById('anchorelementid');
el.onclick(); // Not entirely correct because your event handler will be called
              // without an Event object parameter.

IE9 +

function triggerEvent(el, type){
    var e = document.createEvent('HTMLEvents');
    e.initEvent(type, false, true);
    el.dispatchEvent(e);
}

Kullanım örneği:

var el = document.querySelector('input[type="text"]');
triggerEvent(el, 'mousedown');

Kaynak: https://plainjs.com/javascript/events/trigger-an-event-11/

Adil uyarı:

element.onclick()beklendiği gibi davranmaz. Yalnızca içindeki kodu çalıştırır onclick="" attribute, ancak varsayılan davranışı tetiklemez.

onclickÖzel işlev iyi çalışsa bile, radyo düğmesinin işaretlenmemiş olarak ayarlanmasıyla benzer bir sorun yaşadım . radio.checked = "true";Ayarlamak için eklemek zorunda kaldı. Muhtemelen aynı şey ve diğer elemanlar için (sonra a.onclick()da olmalı window.location.href = "url";)

Lütfen herhangi bir yerde tetikleme işlevini çağırın ve düğmenin tıklanacağı.

<a href="#" id="myBtn" title="" >Button click </a>

function trigger(){
    document.getElementById("myBtn").click();
}