Answered by:
Query regarding Extension development for MS edge

Question
-
Hi,
I am working on the development of an extension for edge browser.
Here I am trying to generate the XPath of the html element on which the user clicks on the webpage.
The problem I am facing is when the user is clicking on any button/hyperlink of the web page to generate the XPath, the click event to that button is also happening(this is the default behavior). I want to restrict this behavior. Means, Once my extension is loaded on the edge browser, no click should trigger its action on any html element of the web page. I should only display by XPath as an alert and no default click should happen.
Please guide me, how can I restring the default click event on any button or hyperlink in javascript.
Looking for the help.
Thanks in Advance
Regards,
Mayank Agarwal
Thanks & Regards, Mayank Agarwal
Answers
-
Hi MayankAg,
You had mentioned that," I will be applying this to any webpage opened in the edge browser. And I have to disable for all clickable elements of the web page."
You just need to modify the code and develop it as per your requirement.
Below is one example.
<!DOCTYPE html> <html lang="en"> <head> <title>Event Propagation</title> <style> #t-daddy { border: 1px solid red } #c1 { background-color: pink; } </style> <script> document.addEventListener("click",handler,true); function handler(e){ e.stopPropagation(); e.preventDefault(); } </script> </head> <body> <p>Please click on the checkbox or button control.</p> <form> <label for="id-checkbox">Checkbox:</label> <input type="checkbox" id="id-checkbox"/> <input type="button" id="t-daddy" onclick="alert('hi');" value="clickme" > </form> <div id="output-box"></div> </body> </html>
Output:
Further, you can modify the code as per your requirement.
Regards
Deepak
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.- Marked as answer by MayankAg Tuesday, August 21, 2018 8:40 AM
All replies
-
Hi MayankAg,
You had asked,"Once my extension is loaded on the edge browser, no click should trigger its action on any html element of the web page."
If you refer the documentation then you can notice that click event is cancelable.
Events
cancelable
property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then itscancelable
property will befalse
and the event listener cannot stop the event from occurring.Calling
preventDefault()
on uncancelable events produces errors, so event listeners that handle multiple kinds of events may want to checkcancelable
before invoking theirpreventDefault()
methods.Most browser-native events that can be canceled are the ones that result from the user interacting with the page. Canceling the
click
,scroll
, orbeforeunload
events would prevent the user from clicking on something, scrolling the page, or navigating away from the page, respectively.I suggest you to use Event.cancelable to suppress the click event in your web page.
Regards
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.- Edited by Deepak Saradkumar PanchalMicrosoft contingent staff, Moderator Friday, August 17, 2018 2:17 AM
-
Thanks Deepak,
But the solution is not working. I am new to JS. Please guide me if I am missing something.
function init() { if (window.Event) { document.captureEvents(Event.MOUSEMOVE); document.captureEvents(Event.MOUSEDOWN); } document.onmousemove = getCursorPosition; document.onmousedown = disableclick; } function disableclick(e) { if (typeof event.cancelable !== 'boolean' || event.cancelable) { alert("cancelable"); // The event can be canceled, so we do so. event.preventDefault(); } else { alert("not cancelable"); // The event cannot be canceled, so it is not safe // to call preventDefault() on it. console.dir(event); } }
My alert "cancelable" is getting called when I click on any HTML button on the web page. But it is still triggering the click and the page is getting changed. And I wanted that no default click operation should perform, only my code logic should get called on click.
Please guide.
Regards,
Mayank
Thanks & Regards, Mayank Agarwal
- Edited by MayankAg Friday, August 17, 2018 8:02 AM
-
Hi MayankAg,
You can also try to use PreventDefault().
Below is the example of that you may try to refer.
<!DOCTYPE html> <html> <body> <a id="myAnchor" href="https://microsoft.com/">Go to Microsoft.com</a> <p>The preventDefault() method will prevent the link above from following the URL.</p> <script> document.getElementById("myAnchor").addEventListener("click", function(event){ event.preventDefault() }); </script> </body> </html>
Reference:
Regards
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com. -
Hi Deepak,
Thanks for the suggestion. But I dont have the ID of the control. I will be applying this to any webpage opened in the edge browser. And I have to disable for all clickable elements of the web page. Weather it is a hyperlink or a button. All the left click should be disabled for those elements and it should execute my logic instead of default click.
Thanks,
MayankAg
Thanks & Regards, Mayank Agarwal
-
Hi MayankAg,
You had mentioned that," I will be applying this to any webpage opened in the edge browser. And I have to disable for all clickable elements of the web page."
You just need to modify the code and develop it as per your requirement.
Below is one example.
<!DOCTYPE html> <html lang="en"> <head> <title>Event Propagation</title> <style> #t-daddy { border: 1px solid red } #c1 { background-color: pink; } </style> <script> document.addEventListener("click",handler,true); function handler(e){ e.stopPropagation(); e.preventDefault(); } </script> </head> <body> <p>Please click on the checkbox or button control.</p> <form> <label for="id-checkbox">Checkbox:</label> <input type="checkbox" id="id-checkbox"/> <input type="button" id="t-daddy" onclick="alert('hi');" value="clickme" > </form> <div id="output-box"></div> </body> </html>
Output:
Further, you can modify the code as per your requirement.
Regards
Deepak
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.- Marked as answer by MayankAg Tuesday, August 21, 2018 8:40 AM
-