<p>Check the console for output.</p>
<div class="bubble-glove">
<div class="example">
<button type="button">Button</button> — Will bubble fully on all devices
</div>
<div class="example">
<div class="unclickable">Unclickable Div — Will not bubble to "document" on iOS</div>
</div>
<div class="example">
<div class="clickable">Clickable Div — Will bubble to "document" on iOS</div>
</div>
</div>
.bubble-glove {
overflow: hidden;
background: black;
}
.example {
margin: 15px;
padding: 15px;
background: #d0d0d0;
}
.unclickable {
background: pink;
}
.clickable {
background: lime;
cursor: pointer; /* Enables clicks to bubble on iOS */
}
jQuery(document).on('click', '.unclickable', function () {
console.log('click reached document');
});
jQuery('body').on('click', '.unclickable', function () {
console.log('click reached body');
});
jQuery('.bubble-glove').on('click', '.unclickable', function () {
console.log('click reached bubble glove');
});
// document.onclick = function () {
// console.log('click reached document');
// };
Also see: Tab Triggers