4

I'm trying to figure out what is being fired when I click an element on a website that's built with reactJS, I click the element and the event is fired, but when I try el.click() nothing happens, the event is firing if it was either a right or a left mouse click, I don't know the first thing about reactJS but I was reading that reactJS has its own "synthetic events" which are supposed wrap native events! so I'm assuming el.click() should fire this synthetic event whatever it is. But it doesn't.

I have created an event that writes out a string to the console, to test if it will run when I click the element, but it did not! Instead the original application event was fired.

So I thought maybe if I can list all the "synthetic events" for this element, I could fire the one with el.dispatchEvent(event)?

I hope I'm making some sense here.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
AL-Kateb
  • 2,914
  • 3
  • 20
  • 24
  • I'm not sure if it's the case but have you considered separating the onClick handler code into a plain function or class method and just calling that function/method when you need to simulate a click? – Diego Zacarias Sep 29 '16 at 15:40
  • Actually it isn't my website, I can't modify its content I'm sort of trying to build a tool that interacts with a web app built with reactJS. I have created an event that should trigger when the element is clicked, but interestingly enough this event is not being fired when the element is clicked (the app's original event is fired instead), which is making me think the app isn't using the click event! And I have no idea what that could be. – AL-Kateb Sep 29 '16 at 15:54

1 Answers1

0

el.dispatchEvent(event) should dispatch the event correctly. Though I think "native" event listeners won't be triggered by that. Only the react internal ones. The synthetic events won't leak to the outside.

Try adding a event listener to the document.body. You then can determine if the button was clicked by checking event.target (if the event wasn't stopped from bubbling).

Scarysize
  • 4,131
  • 25
  • 37
  • Thank you, but I don't have the event to begin with, which is what I was trying to accomplish it is obviously not the click event or else it should have been fired by el.click() no? Which is why I don't think it's a native event, so is there a way that I can get all the internal events bound to this element? Then after I grab the event I could call dispatchEvent with the event handler as an argument – AL-Kateb Sep 29 '16 at 16:30
  • AFAIK react has one single actual event listener at its root node. This one handles all the events fired from nodes in the react tree. I don't think you can hook into that. – Scarysize Sep 29 '16 at 16:33
  • If that's true I need to find the native event that's triggering the internal event! After all like any JS it must be using one of the native events right? Which is confusing because while the event is fired with a mouse click, it isn't with click(), am I missing something here? – AL-Kateb Sep 29 '16 at 16:53
  • See if this answer helps: http://stackoverflow.com/questions/36202010/populate-a-reactjs-input-field-as-an-end-user – Radio- Sep 29 '16 at 19:16
  • I just found this one, check #4: https://medium.freecodecamp.com/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329#.1q1y3xoga – Scarysize Sep 30 '16 at 12:50
  • Thank you both, I tried monitoring all events for the element body, and it did not work! It is working on all other web pages, except this app. What I did though is I tried to get the clicked target using this code: `document.addEventListener('click', function(e) {e = e || window.event;console.log(e.target);}, false);` Wherever I click I get the clicked target in the console, but if I click on this specific element, nothing gets written out! Which is weird, does stopPropagation prevent this function from firing? – AL-Kateb Oct 01 '16 at 11:04
  • Yep, sounds like it. – Scarysize Oct 01 '16 at 11:14