how to trigger a click event by specifying coordinate position(x,y) in react?

Question

I have a bootstrap modal that has a form. I need to be able to click outside the modal so that the modal closes when the form is submitted. how can i achieve this in react, thanks

EDIT:

bootstrap_modal
   form_inside_bootstrap_modal
      submit_button_inside_form
   </ form_inside_bootstrap_modal>
</ bootstrap_modal>

I want to be able to close the bootstrap modal when submit_button_inside_form is clicked

SOLUTION:

document.elementFromPoint(x,y).click()

https://stackoverflow.com/questions/36695438/detect-click-outside-div-using-javascript — Vahid Alimohamadi, Jun 22 '20 at 05:56
Your question is unclear, Could you please elaborate more what you exactly want. — Alok Mali, Jun 22 '20 at 06:12

score 1 · Answer 1 · answered Jun 22 '20 at 06:25

1

You can set eventListener on click in componentDidMount.

like this:

  useEffect(() => {
    window.addEventListener("click", function(e) {
      if (document.getElementById("modalWindow").contains(e.target)) {
        alert("clicked inside");
      } else {
        alert("clicked outside");
      }
    });
    return () => window.removeEventListener("click");
  }, []);

see the example i wrote here.

answered Jun 22 '20 at 06:25

Vahid Alimohamadi

4,900
2
22
37

1

thank you, but my i have to simulate a click event in the window,(somewhere outside the modal) when a button inside the modal is clicked – Kritish Bhattarai Jun 22 '20 at 06:28
1

@kritiz and the example didn't do that? hmmm. It seems it is doing that. – Vahid Alimohamadi Jun 22 '20 at 06:29
1

the example shows me where I clicked , (outside or inside) but I need to make a click event outside the modal when I click a button inside the modal – Kritish Bhattarai Jun 22 '20 at 06:37
1

Do you mean you need to run a function which in upper level, when click on the button? – Vahid Alimohamadi Jun 22 '20 at 06:48

score 0 · Accepted Answer · answered Aug 08 '21 at 18:55

0

It's simulating a click at a position: x,y coordinates with javascript which can be achieved using this

document.elementFromPoint(x, y).click();

answered Aug 08 '21 at 18:55

Kritish Bhattarai

1,501
15
20

how to trigger a click event by specifying coordinate position(x,y) in react?

2 Answers2