stopPropagation of jquery not working as expected

I a currently working on a ui recorder where I some times absorb the events using stopPropagation of jquery which is defined as

    stopPropagation: function () {
        this.isPropagationStopped = K;
        var a = this.originalEvent;
        !a || (a.stopPropagation && a.stopPropagation(), a.cancelBubble = !0)
    }

By jquery. I eat the event as

    absorbClick: function(e) {
        e.stopPropagation();
        e.preventDefault();
    }

and attach the event to all the elements by the function

  jQuery(frame.document).bind("click", {}, function(e) {
        e.stopPropagation();
        e.preventDefault();
    }, true);

What is surprising is that for some of the websites, I fail to absorb the click events while for some of websites. It works properly.

Above process does not work fort this sample website. Even before the absorClick function is called the text changes in the following one. Why am I not able to absorb event?

<html>
    <head>
        <title>Repro</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    </head>
    <body>
        <div id="mydiv">Click me!</div>
        <script>
            $('#mydiv').click(function() { $('#mydiv').html("You have clicked me!") });
        </script>
    </body>
</html>

while it does work for

<div class="central-featured-lang lang1" lang="en">
    <a class="link-box" href="//en.wikipedia.org/" title="English — Wikipedia — The Free Encyclopedia"><strong>English</strong><br>
        <em>The Free Encyclopedia</em><br>
        <small>4 479 000+ articles</small>
    </a>
</div>

All the above process is part of https://github.com/sebuilder/se-builder/blob/master/seleniumbuilder/chrome/content/html/js/builder/verifyexplorer.js. I am fixing this issue present for sebuilder.

Answers:

Answer

The problem is that the event handler in the example is executed before your event handler is executed, since it is directly bound to the element.

Your event handler is added to the root of document, so it will be the very last handler that is executed for any event.

If you want to capture events before any other handler is triggered, you have to bind the handler in the capture phase, with addEventListener:

document.addEventListener('click', function(event) {
    event.stopPropagation();
    event.preventDefault();
}, true); // <- passing true binds the handler in the capture phase

jQuery doesn't let you do that for compatibility reasons. IE browsers that don't support addEventListener also don't support binding in the capture phase.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.