4

We are working on an Open Source Chrome extension: Digital Assistant Client

Product Demo:

Part 1: https://www.youtube.com/watch?v=Iz2WgKY0fhc

Part 2: https://www.youtube.com/watch?v=i0_MNfBnYfM

We are having trouble in getting our onclick event handler executed when the page is navigated to another page.

I want to invoke all the onclick event handlers attached to a domnode that the user has clicked before the page gets navigated to another page so that our functionality gets executed. The solution should work for any framework that cancels the bubbling of the onclick event handlers.

There are some questions already raised by some people as given below

  1. How to ensure that a function is executed completely, before navigating to another page?
  2. How to execute onclick before navigating to a different page?

Thanks in advance

Yureswar Ravuri
  • 71
  • 3

3 Answers3

0

You can probably monkey-patch addEventListener on the DOM Node, capture the event handlers that get registered later, and maintain a list of those.

const originalEventListener = DOMNode.addEventListener;
DOMNode.addEventListener = (type, callback) => {
  const clicksHandler = [];
  if(type === 'click'){
    clicksHandler.push(callback);
    originalEventListener.call(DOMNode, type, callback);
  }
}

You can probably use beforeunload event to make sure all the clicksHandler are called once again before user navigates away.

window.onbeforeunload = (e) => {
  clickHandler.forEach((handler) => handler.call(...))
}
Kanishk Anand
  • 1,686
  • 1
  • 7
  • 16
  • This solution will invoke all the click handlers. But i want to invoke the eventhandlers that are attached to a particular domnode from where the user has clicked. – Yureswar Ravuri Nov 29 '21 at 04:05
  • @YureswarRavuri I've overridden the `addEventListener` of a particular `DOMNode` and not on window. If we're able to identify the DOMNode, this would work – Kanishk Anand Nov 29 '21 at 05:43
0

you just have to call the event on that element.

const button1 = document.getElementBy....

button1.click()
bogdanoff
  • 1,705
  • 1
  • 10
  • 20
  • how do we know which button to invoke. All the eventhandlers are getting discarded when the page is navigated from one page to another page. – Yureswar Ravuri Nov 29 '21 at 04:19
  • @YureswarRavuri Assuming page uses `click` event listeners only on buttons, you can get all buttons by querying `document.getElementsByTagName` and loop through the returned dom list. Call this inside [pageVIsibility](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) and [onbeforeunload](https://stackoverflow.com/a/25182078/14112947) events callback. – bogdanoff Nov 29 '21 at 07:05
0

add alert before navigation inside click method, so alert will notify you.

Vishal Rindhe
  • 11
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 29 '21 at 05:29