jQuery.signature works fine until scrolling and then

Question

I have a site which makes extensive use of Keith Wood's excellent jQuery UI signature plugin. I've also used Touch punch as recommended. It's a very vanilla implementation but it's broken. I'm sure it was working previously.

I'm using a Surface Pro (touch enabled tablet) and the signature objects work fine until you scroll at which point two issues occur:

1: Any stylus strokes end up appearing as point to point lines (i.e. directly from the point where you put the stylus down until where lifted it up) rather than capturing any movement (e.g. curves) in between
2: The browser shows the following console error: "[Intervention] Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted."

Sometimes it starts working after a few clicks but it's hit and miss, often the same issue keeps cropping up for a while after scrolling.

Includes:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css
/public/front_css/jquery.signature.css
js/excanvas.js
https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
/public/front_js/jquery.signature.min.js
/public/front_js/jquery.ui.touch-punch.min.js

Some code:

function checkifallfieldsfilled()
{   
    var empty = false;
    $('form > input').each(function()   
    {
    if ($(this).val() == '')
    {
        empty = true;
    }
});

$('form > select').each(function()
{       
    if ($(this).val() == '')
    {
        empty = true;
    }
}); 
if (empty)
{
    $('#btnProcess').attr('disabled', 'disabled');
} else
{
    $('#btnProcess').removeAttr('disabled');
    var sound = new Audio('/public/sounds/sound.mp3');
    sound.play();
}}

$(function()
{     
    $('#page1_initials_b').signature({guideline: false,change: function(event, ui) 
    { 

$('#ini_page1_initials_b').val($('#page1_initials_b').signature('toSVG'));
checkifallfieldsfilled();
    }
});

$('#btnClear_page1_initials_b').click(function() 
{
    $('#page1_initials_b').signature('clear');
});
});

Any help would be gratefully received!

I have similar problem. When we use surface pro , signature doesn't work with touch but only with mouse. But what I find interesting yesterday is , when you go to inspect mode with mobile view in console, it works fine. I will also appreciate any help — Neerav Patel
I had to end up using a different jQuery signature plugin to overcome this issue. I'll check my source code and let you know which library I'm using now. — ChrisFNZ
I did find solution for this problem, I will post that in solution — Neerav Patel

Neerav Patel Neerav Patel · Accepted Answer · 2019-03-07T15:43:41

I had same problem. I pinpoint problem to Touch punch not recognizing touch event on surface pro but when we did inspect and went to mobile mode it did.

So I did check in code if it is touch device( it is not a necessary step , since below method will just invoke touch events, so it won't affect non-touch devices) and than added below code

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent({
            touchstart: "mousedown",
            touchmove: "mousemove",
            touchend: "mouseup"
        }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();// you can remove preventDefault if it creates problem with other functionalities
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

You can initialize init() on page load or when user interacts with signature area.

jQuery.signature works fine until scrolling and then

1 Answers