0

jQuery lib Sketch.jsを使用した基本的なHTML描画アプリケーションがあります（<canvas>を使用し、すべてのデスクトップブラウザのIE、Opera、Chrome、Firefoxで完全に動作します。OperaMobile、Chrome Mobile、 FirefoxMobileで正常に動作します、Dolphin HD、Androidストックブラウザ2.2.4。

しかし、Android 4.0ストックブラウザでタブレットまたは電話でテストすると、<canvas>要素を押すと、ボックスが青色で強調表示され、指が実際にどこにあるかに関係なく、タッチイベントが中央から始まります。であり、その後、通常のように戻って指を追跡します。明らかに、要素がタッチされるたびに、その特定のブラウザで不要な線が描画されます。

テストのために、sketch.jsを無効にしてみて、アラート付きの一般的なonmousedownイベントを作成しました。これが発生すると、キャンバス全体がもう一度青色で強調表示され、同じ動作が発生すると思います。Sketch.jsのWebサイトにアクセスすると、まったく同じ動作が発生します。

この動作の既知の回避策はありますか？または、この動作を示さない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 イベントを undefined に設定します。

于 2012-09-04T21:08:06.640 に答える