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

当应用已保存到“主屏幕”时，问题会更严重。当触摸画布的边缘时，它确实发生在Web浏览器中，但是在主屏幕应用程序中，无论画布在何处触摸，它都会执行它。

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

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

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

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

2 个答案: