ChrisFNZ
ChrisFNZ

Reputation: 617

jQuery.signature works fine until scrolling and then

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!

Upvotes: 1

Views: 1722

Answers (1)

Neerav Patel
Neerav Patel

Reputation: 101

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.

Upvotes: 1

Related Questions