jQuery: Prevent page scroll when user's finger touches an element

Question

I'm using the following jQuery plugin: http://willowsystems.github.io/jSignature/

I'm trying to do something very simple which is stopping page scrolling when the user's finger is inside a signature area (the page movement when writing a signature on the phone is excruciatingly bad to the point where you can't write your signature at all). I have tried the following which is not working in Firefox and I'm not sure why:

$('.signature').on('touchmove', function(e) {
        e.preventDefault();
    });

I have also tried this which isn't working either:

$(document).delegate('.signature', 'touchmove', false);

I've searched for hours and I can't seem to find anything that works. If anymore detail is required please let me know and I will happily append to the question.

Thank you very much for everyones help.

edit: I'm using the latest version of Firefox on the phone.

Answer 1

try to use the e.preventDefault() on the ontouchmove of the html element.

<div class="signature" ontouchmove="event.preventDefault();">

</div>

this example works for me: http://jsbin.com/pulul/1/edit?html,css,output

Answer 2

Same problem in field on Android browser. Capturing signature gets dots instead of sig. So, testing in browser I see the focus is never lost from prior field when i click with mouse into jSignature. So, try something like this:

onblur="if(this.value.length>1) document.getElementById('CustomerSignature').focus()"

Welp, with that you'll see the onblur DOES NOT FIRE when you touch your jSignature but does fire when you touch your other fields. There ya go. Have not been able to reproduce the exact bug reported to me yet on the tablet; but I think the scroll is being sent to ANOTHER element.

So, fix is to force the focus to change to the jSignature. That's what I think. For now, I fiddled around with the HTML so my last field is a select and use the onchange to set the focus to my jSig.