Check if mousedown and mouseup event was fired at same time

Question

I am using Jtinder to show image on screen.

You can swipe images right and left.

I am also using Twitter Bootstrap Modal when an Image is clicked and some details about image are shown in a Modal.

Problem is, when I swipe image to like or dislike, bootstrap Modal is also opened. I am using openModal() to insert description in modal and then open Modal.

here is code.

<img  ontouchstart="openModel(this, '<?php echo $rec->item_id ?>')" onclick="openModel(this, '<?php echo $rec->item_id ?>')"  class = "col-xs-12 col-sm-6" src = "<?php echo $rec->main_image; ?>">

inside openModel() , I want to check if it was only mousedown >> mouseup event fired, now Modal should open, if it was mousedown >> mousemove then DO NOT OPEN MODAL.

Answer 1

You can't unless you set a flag, you can use an external library like hammerjs which have a variety of gestures to help you with; if you want to implement this by yourself, you can set up a property on the element when you receive the mouse down event (it can be just a boolean but you can add some threshold if you like), and remove it on mouse move. Then on mouse down, you can check if the element still have that flag on, if the flag is on, then it was a regular click, otherwise the image have been dragged and shouldn't display.