2016-10-28 2 views
0

Ich versuche, auf ein Reagieren JS-Element programmgesteuert zu klicken.JavaScript programmgesteuert .click() wird nicht in ReactJS Element ausgelöst

zum Beispiel überprüfen Sie bitte diesen Link: Click Here

Ich bin nicht in der Lage auf die Musterbilder klicken, die das Hauptprodukt Bild ändern wird.

habe ich versucht, mit diesem Code unten:

document.querySelector('#product-selection-4476800 > section.np-sku-filters > div.np-circular-swatches.small > ul > li:nth-child(2) > a').click(); 

document.querySelector('#product-selection-4476800 > section.np-sku-filters > div.np-circular-swatches.small > ul > li:nth-child(2) > a > span > img').click(); 

Beide arbeiten nicht sind. Ich versuchte auch

function clickElement(el){ 
    var ev = document.createEvent("MouseEvent"); 
    ev.initMouseEvent(
     "click", 
     window, null, 
     false, false, false, false, 
     0, null 
    ); 
    el.dispatchEvent(ev); 
} 

Noch ändert sich das Element nicht.

Danke!

+0

Wenn Sie zum Beispiel Referenz sagen, bedeutet es eine Geige oder Code-Snippet, nicht Ihre Website – Rajesh

+0

@Rajesh Sorry dafür. Ich erstelle eine Chrome-Erweiterung. Welches Element klicken wird, hängt von der gegebenen Meinung des Benutzers ab. Könnten Sie mir bitte helfen, auf das Element zu klicken? Und ich kenne ReactJS nicht, deshalb kann ich die Geige nicht schaffen. Vielen Dank. – Subhajit

+0

Kommt auch in Frage, nur ein Vorschlag, wenn Sie ein Framework oder eine Bibliothek verwenden, versuchen Sie es bis max zu verwenden. Auf diese Weise ist Ihr Code konsistent. Anstatt zu versuchen, einen Gegenstand zu holen und einen Klick auszulösen, versuchen Sie einfach, den Handler aufzurufen. Wenn nicht, versuchen Sie folgenden Link [DOM-Knoten vom untergeordneten Element react] (http://stackoverflow.com/questions/29568721/getting-dom-node-from-react-child-element) – Rajesh

Antwort

0

Ich habe eine Lösung gefunden, auf ein ReactJS Element von außerhalb des It's DOM zu klicken.

var elm = document.querySelector('#product-selection-4476800 > section.np-sku-filters > div.np-circular-swatches.small > ul > li:nth-child(2) > a'); 

function triggerEvents(n, e){ 
    var ev = document.createEvent('MouseEvents'); 
    ev.initEvent(e, true, true); 
    n.dispatchEvent(ev); 
} 

triggerEvents(elm, "mouseover"); 
triggerEvents(elm, "mousedown"); 
triggerEvents(elm, "click"); 
triggerEvents(elm, 'mouseup'); 

Und es funktioniert wie erwartet.

Vielen Dank für Ihre Zeit und Antworten. :)

Verwandte Themen