iPhone 上的 HTML5 Canvas 突出显示 touchstart / mousedown 事件

Question

每当触摸（并按住）画布时，它都会以较深的颜色突出显示。当触摸被释放时，它会恢复正常。它不像文本选择，它与 iPhone 在超链接上使用的突出显示相同。

我正在使用 jQuery 来绑定事件：

$('canvas').bind('mousedown touchstart', function(e) {
    var c = $(this), offset = c.offset();
    var touch = {
        x: (e.targetTouches ? e.targetTouches[0].pageX : e.pageX) - offset.left,
        y: (e.targetTouches ? e.targetTouches[0].pageY : e.pageY) - offset.top
    };

    testApp.lastTouch = touch;

    return false;
});

当应用程序保存到“主屏幕”时，问题会更严重。当触摸画布的边缘时，它确实会在网络浏览器中发生，但在主屏幕应用程序上，无论触摸画布的位置，它都会这样做。

这个问题的原因可能是什么？

Answer 1

我最终发现问题可以用下面的CSS来解决：

.puzzle canvas {
    -webkit-tap-highlight-color: transparent;
}

Answer 2

也许您需要在查看页面时取消模糊元素？

$(window).focus(function() { $(':focus').blur(); });

或者...

$(document).ready(function() {
    setTimeout(function() {
        $(':focus').blur();
    }, 200); // Arbitrary amount.
});

似乎是一个粗略的解决方案，但它可能会有所帮助。