jQuery.signature 工作正常，直到滚动然后

Question

我有一个广泛使用 Keith Wood 出色的 jQuery UI 签名插件的网站。我还按照建议使用了 Touch Punch。这是一个非常普通的实现，但它已经坏了。我确定它以前可以正常工作。

我使用的是 Surface Pro（支持触控的平板电脑），签名对象工作正常，直到您滚动时出现两个问题：

1：任何触控笔笔触最终都会显示为点对点线（即直接从您放下触控笔的点到抬起触控笔的点），而不是捕捉两者之间的任何运动（例如曲线）
2：浏览器显示以下控制台错误： “[干预] 忽略了取消使用可取消 = false 的 touchstart 事件的尝试，例如因为滚动正在进行中且无法中断。”

有时它会在点击几下后开始工作，但它会时不时出现，通常相同的问题会在滚动后持续出现一段时间。

包括：
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

一些代码：

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

任何帮助将不胜感激！

Answer 1

我有同样的问题。我将问题定位到 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()。