HTML5 Canvas在iPhone上突出显示touchstart / mousedown事件 [英] HTML5 Canvas on iPhone highlights on touchstart / mousedown events

问题描述

每当画布被触摸（并保持）时，它将以较深的颜色突出显示。当触摸释放时，它返回到正常。

Whenever canvas is touched (and held) it is highlighted in a darker colour. When touch is released it returns back to normal. It is not like a text selection, it is the same highlight that the iPhone uses on hyperlinks.

我使用jQuery来绑定事件：

I am using jQuery to bind events:

$('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浏览器中发生，但是在主屏幕应用程序上它会发生，而不管画布被触摸的位置。

Problem occurs worse when app has been saved to "Home Screen". It does happen in web browser when edge of canvas is touched, but on home screen app it does it regardless of where canvas is touched.

这可能是什么原因问题？

What might be the cause of this problem?

推荐答案

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

I eventually found that the problem can be solved with the following CSS:

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

这篇关于HTML5 Canvas在iPhone上突出显示touchstart / mousedown事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！