0

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!

4

1 回答 1

0

我有同样的问题。我将问题定位到 Touch Punch 无法识别 Surface Pro 上的触摸事件，但是当我们进行检查并进入移动模式时，它确实做到了。

所以我确实检查了代码是否是触摸设备（这不是必要的步骤，因为下面的方法只会调用触摸事件，所以它不会影响非触摸设备）然后添加到下面的代码中

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

您可以在页面加载或用户与签名区域交互时初始化 init()。

于 2019-03-07T15:43:41.113 回答