This repository was archived by the owner on Jan 16, 2020. It is now read-only.
This repository was archived by the owner on Jan 16, 2020. It is now read-only.
Event handlers called multiple times when used on nested elements #14
Description
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