Question

我有一个站点，该站点广泛使用Keith Wood出色的jQuery UI签名插件。我还按照建议使用了触控打孔机。这是一个非常原始的实现，但已被破坏。我确定它以前可以正常工作。

我正在使用Surface Pro（支持触摸屏的平板电脑），并且签名对象可以正常工作，直到您滚动到此时出现两个问题为止：

1：所有手写笔笔划最终都以点到点线的形式出现（即直接从您将手写笔放下的位置直到抬起手写笔的位置），而不是捕捉到两者之间的任何运动（例如曲线）
2：浏览器显示以下控制台错误： “ [干预]忽略尝试取消带有cancelable = false的触摸开始事件的尝试，例如，因为滚动正在进行且无法中断。”

有时候，单击几下后它便开始工作，但是遇到了一些麻烦，通常相同的问题在滚动后会出现一段时间。

包括：
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（）。

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

1 个答案: