jQuery prevent click event from firing when scrolling a div

Question

Sounds easy enough right? But I'm using a custom scrolling control (http://github.com/inuyaksa/jquery.nicescroll) and I've tried most of the tricks I've seen to prevent this when using draggable(). But they aren't working for this... I uploaded the page and the code here:

Demo: http://www.beforethecode.net/blazin Source: http://www.beforethecode.net/blazin/blazin.zip

This is for a touch screen project. So far my only solution was to bind the $thumbs to 'dblclick' so it would stop firing after dragging the mouse/finger... But I would really like to get it to work with a single click after the scrolling has stopped.

Answer 1

Have you tried:

event.stopPropagation()

Here's the reference on this function.

Answer 2

Your best bet will be a solution similar to how many autocompletes work canceling native events and instead using timeouts and flags to only act under desired circumstances:

1. event.preventDefault() "click" event on related controls, <a /> tags, etc. (i.e. don't let any native browser behavior happen relating to triggering click).
2. On "click" event after preventing default, put the click action in a small setTimeout and save the timeout handle.
3. On "stopdrag" event, clear the timeout handle; this will theoretically happen during the "click" event timeout period and prevent a click from happening after a logical stopdrag, whereas on a real click there will be no stopdrag to cancel the timeout (so the action will take place as desired then).

Code:

var clickActionTimeout = null;

function clearClickActionTimeout() {
  if(clickActionTimeout) {
    clearTimeout(clickActionTimeout);
    clickActionTimeout = null;
  }
}

$elem.click(function(e) {
  e.preventDefault();
  clearClickActionTimeout();
  clickActionTimeout = setTimeout(function() {
    // This was a real click if we got here...
    openPicture();
  }, 200);
});

$elem.bind('stopdrag', function() {
  clearClickActionTimeout();
});

Answer 3

I don't work with this library, but maybe this helps you. As a get, it's not for mobile device, it's for touch screen. All work's fine on my phone, scrolling is ok.

You have some configuration properties, and some of them looks like just for your needs. Here some of them:

. touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer, default is false

. cursordragontouch, drag cursor in touch / touchbehavior mode also (default:false)

https://github.com/inuyaksa/jquery.nicescroll/blob/master/README

I don't see your code, your link is broken, maybe you already know about this properties. But if not, hope this will help you. This is just find a mare's nest.

Answer 4

I don't know how to manage the touch events. However this is how I would do it for click events and I guess it is not much different from those http://jsfiddle.net/USvay/

The idea is to prevent the click event and instead your desire function will fire on mouseup if a certain time has or not passed.

var clicked = true,
    tOut;

$('a').on('click', function (e) {
    e.preventDefault();
}).on('mousedown', function () {


    tOut = setTimeout(function () {
        clicked = false;
    }, 200);



}).on('mouseup', function () {

    if (clicked == true) {
        clearTimeout(tOut);
        my_function();

    } else {
        clicked = true;
        $('<p>Dragged</p>').appendTo('#result');
    }

});

function my_function() {
    $('<p>Clicked</p>').appendTo('#result');
}