Preventing click during drag

[Koviko]

Is there a way to prevent clicks on anchor elements while the page is being dragged?

[Gildas THORAVAL]

I found this solution yesterday:

$('...').click(function(){
if (myiScroll.animating) return;
...

[trkaplan (tuncay)]

Thanks Gildas, that's working!

[Koviko]

This working great for me, as well. Thanks. :)

[Gildas THORAVAL]

a i've found a better solution: replace "animating" by "moved"
cause if you slide stop and release, that is not animating and click work

[mistering]

@Gildas,

I am kind of new to this. Can you help me put the solution code you listed above in this context below:

var myScroll;

function loaded() {

myScroll = new iScroll('contentWrapper');

}

I was able to use another code solution that worked, but that failed once I inserted images.

[Gildas THORAVAL]

In fact this solution don't realy block the click event.
It's inside the click event that I detect if the scoll was moved between mous press and mouse up

var myScroll;

function loaded() {

myScroll = new iScroll('contentWrapper');

// considering your clickable object have a "button" class.

$('#contentWrapper .button').click(function(){
if (myScroll.animating)
return;

//your code here
}
}

PS: $ is jquery function. I don't remember how to do without jquery, should be something like:
document.getElementById('contentWrapper').????('.button').AddEventListenener???('onclick', your function);

is that clear for you?

[mistering]

@Gildas

Thanks for the help; I really appreciate it. I plugged in the code, but it did not work. I am actually looking for a solution that will block the click event to prevent a modal window from firing. I found an example close to what I am looking for:  http://jsfiddle.net/B37jn/3/ but it seems no one has found a solution.

Any help appreciated. Thank you.

[Gildas THORAVAL]

cool website, I add it to my favorites...

I tried chandged your code but it appears to work only on touch devices...

[mistering]

@Gildas

Thank you. It worked for the example http://jsfiddle.net/B37jn/24/  The code is not mine but I found it to be similar since I was using a modal window.

I plugged into my code, but the modal still getting triggered. Here is what I have (using Colorbox code for the modal)

<script>

$(document).ready(function(){

$('a').colorbox({iframe:true});

});

</script>

and your code

<script>

var scrollname;

function loaded() {

  scrollname = new iScroll('wrapper');

     $('#thelist a').click(function() {

     if (scrollname.moved) return;

   }

   );

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);

</script>

[mistering]

update. the code worked with the modal once i added 'false' after 'return'

...

if (scrollname.moved) return false;

...

i hope that does not cause other issues with the rest of the codes. please let me know if that is an improper way to do it. thanks for the help.

[Gildas THORAVAL]

if I'm not wrong
return false in a event is the equivalent to event.stopPropagation() call ( ! ? )
so the click event stop here and don't go to parent objects.
So no it's not improper.

[Mindon Feng]

my patch to prevent unwanted  click event in a scroll area

 \+ line 336  ( in _start: function )

that.distance = 0;

 \+ line 438 ( in _move: function )

that.distance += Math.sqrt( deltaX * deltaX + deltaY * deltaY );

 \+ line 913 ( in refresh: function )

that.distance = 0;

example

// usage

function clickHandler() {

 if( myScroll.distance > 20 ) 

   return;

 // click task here

[Андрей Нахабов]

I just check moved property and distX+distY , so no need to patch the source.

onClick = function() {

    var d = Math.abs(scroller.distX) + Math.abs(scroller.distY); //no need to extract the root for my tasks

    if (scroller.moved || (d > 10) return false;

    /*  click event handling */

}

[Chris Fennell]

On my applications, I personally don't use iScroll's onClick event.

I only used the moved flag. Like this.

$('.link').on('click', function() {

  if (myScroll.moved) return; 

  // add click functionality here

});