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.

could you please provide a minified version of your problem on jsfiddle.net (or anything like it) so we can easily tinker with it. thanks. did you try jquery mobile, which has built-in support for touch events? — Imperative
– Imperative, Commented May 29, 2013 at 9:30
You need to consider every event fired when your finger hit the screen and leaves it. you need to develop a bit more (code, issue, example in fiddle) — TecHunter
– TecHunter, Commented May 29, 2013 at 9:34

Ezekiel Victor · Accepted Answer · 2013-06-07 04:45:13Z

3

+50

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:

event.preventDefault() "click" event on related controls, <a /> tags, etc. (i.e. don't let any native browser behavior happen relating to triggering click).
On "click" event after preventing default, put the click action in a small setTimeout and save the timeout handle.
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();
});

edited Jun 7, 2013 at 4:45

answered May 29, 2013 at 9:57

Ezekiel Victor

3,8741 gold badge30 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ezekiel Victor Over a year ago

Actually, now that I think about it, the "clicked" var is unnecessary; the timeout handle is enough to control the behavior. I edited my comment.

Dima Deplov · Accepted Answer · 2013-06-04 22:09:14Z

1

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.

answered Jun 4, 2013 at 22:09

Dima Deplov

3,7187 gold badges48 silver badges78 bronze badges

Comments

Alvaro · Accepted Answer · 2013-06-05 05:10:57Z

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');
}

Asif Salahuddin Ghazi · Accepted Answer · 2013-06-05 07:10:33Z

1

Have you tried:

event.stopPropagation()

Here's the reference on this function.

answered Jun 5, 2013 at 7:10

Asif Salahuddin Ghazi

61017 silver badges38 bronze badges

Collectives™ on Stack Overflow

jQuery prevent click event from firing when scrolling a div

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related