0

我有一个使用 jQuery lib Sketch.js的基本 HTML 绘图应用程序（它使用 <canvas>，在所有桌面浏览器上的 IE、Opera、Chrome、Firefox 上运行良好。在 Opera Mobile、Chrome Mobile、Firefox Mobile 上运行良好, Dolphin HD, Android股票浏览器2.2.4。

但是，当我在平板电脑或手机上的 Android 4.0 股票浏览器上对其进行测试时，当我按下 <canvas> 元素时，框会以蓝色突出显示，并且触摸事件从中心开始，而不管手指实际在哪里是，然后它会像往常一样返回并跟踪手指。显然，每次触摸元素时，在该特定浏览器上都会绘制一条不需要的线。

为了进行测试，我尝试禁用sketch.js，并制作了一个带有警报的通用 onmousedown 事件。当这种情况发生时，整个画布再次以蓝色突出显示，我想会发生同样的行为。当我访问Sketch.js网站时，会发生完全相同的行为......

这种行为是否有任何已知的解决方法？或者有没有不表现出这种行为的Sketch.js的替代品？（我想所有带有 onmousedown 事件的 <canvas> 元素都是完全相同的）

为了完整起见，这是 HTML+JS：

<canvas  style="border:1pt solid black;margin:auto;cursor:crosshair;clear:both;"  width="450px" height="200px" id="colors_sketch" ></canvas>
<script type="text/javascript">
   $(function() {
        $('#colors_sketch').sketch();
    });
</script>
4

1 回答 1

1

出于某种原因，即使在触摸屏中，浏览器也会处理鼠标事件。

要解决这个问题，只需在 ontouchstart 事件中将 mousedown、mouseup、mousemove 事件设置为未定义。

于 2012-09-04T21:08:06.640 回答