Event handlers called multiple times when used on nested elements #14

AdamDz · 2013-06-11T14:21:55Z

Pointer events triggered by nested elements bubble up. If there is another handler bound higher in DOM, a duplicate pointer event is triggered.

A minimal example:

<html>
<body>
    <div id="outer" style="border: 1px solid red; padding: 50px;">
        <div id="inner" style="border: 1px solid blue; padding: 50px;">
            Click me
        </div>
    </div>
    <script type="text/javascript" src="/static/www/js/lib/jquery.js"></script>
    <script type="text/javascript" src="/static/www/js/lib/pointer.js"></script>
    <script>
        $("#outer").on('pointerdown', function() {
            console.log('outer pointerdown');
        });

        $("#inner").on('pointerdown', function() {
            console.log('inner pointerdown');
        });
    </script>
</body>
</html>

A single click on the inner rectangle produces output:

inner pointerdown
outer pointerdown
inner pointerdown
outer pointerdown

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Event handlers called multiple times when used on nested elements #14

Event handlers called multiple times when used on nested elements #14

AdamDz commented Jun 11, 2013

Event handlers called multiple times when used on nested elements #14

Event handlers called multiple times when used on nested elements #14

Comments

AdamDz commented Jun 11, 2013