locked
Query regarding Extension development for MS edge RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    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

    Thursday, August 16, 2018 9:02 AM

Answers

  • Question
    Sign in to vote
    1
    Sign in to vote

    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
    Tuesday, August 21, 2018 7:51 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    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.

    click Event

    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 its cancelable property will be false 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 check cancelable before invoking their preventDefault() 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, or beforeunload events would prevent the user from clicking on something, scrolling the page, or navigating away from the page, respectively.

    Event.cancelable

    I suggest you to use Event.cancelable to suppress the click event in your web page.

    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.


    Friday, August 17, 2018 2:16 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    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
    Friday, August 17, 2018 7:20 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    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:

    preventDefault() Event Method

    Event.preventDefault()

    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.

    Monday, August 20, 2018 6:08 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    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

    Monday, August 20, 2018 6:37 AM
  • Question
    Sign in to vote
    1
    Sign in to vote

    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
    Tuesday, August 21, 2018 7:51 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Deepak,

    Thanks a lot. This is what I was looking for. 

    I was making mistake in the AddEventListener statement. 

    Thanks again. :)


    Regards,

    Mayank Agarwal

    Thanks & Regards, Mayank Agarwal

    Tuesday, August 21, 2018 8:40 AM