I have a calendar application where users can click items, which generates a popup allowing the user to amend the details, or drag items to move them to a different day.
On mobiles, I use touchpunch to allow this dragging to happen. It works fine on iPhones, but on Android the draggable stuff appears to get fired at the expense of the click.
The following code illustrates the problem. On iPhone, if you click the div it triggers the click event. If you drag the div it triggers the drag events and then the click event, which is fine. On Android, if you click the div it triggers the drag events.
Is this a limitation or bug in touchpunch, or a configuration I am missing, or something else? Thank you for reading!
$("#myel").click(function() {
alert("Clicked");
});
$("#myel").draggable({
stop: function() {
alert("Dragged");
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div id="myel" style="border:solid 1px black;padding:8px;width:120px;">
Click me or drag me
</div>
