Nhấp chuột (hoặc chạm) sự kiện trên canvas khiến lựa chọn sử dụng HTML5, Phonegap và Android

Tôi đang làm việc trên trò chơi HTML5 sử dụng easlejs + phonegap và đang gặp sự cố khi màn hình nhấp nháy mỗi khi bạn nhấp/chạm/mousedown trên Tranh sơn dầu.Nhấp chuột (hoặc chạm) sự kiện trên canvas khiến lựa chọn sử dụng HTML5, Phonegap và Android

Dưới đây là mã rất đơn giản mà tôi đã tạo để kiểm tra vấn đề và xem liệu nó có liên quan đến easlejs hay không. Như bạn có thể thấy từ mã nó không có gì để làm với easlejs và chỉ là một vấn đề html5/phonegap.

Bạn có thể thấy tôi cũng đã thử không chọn kiểu CSS nào để không may mắn.

screenshots showing the orange border when holding mouse down on the canvas (1st image) and then releaseing it (2nd image)

<!doctype html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     #canvas 
     { 
      user-select: none; 
      -webkit-user-select: none; 
      -moz-user-select: none; 
     } 
    </style> 
</head> 
<body> 
    <canvas id="canvas" width="320" height="480"></canvas> 
    <script type="text/javascript"> 
     var canvas = document.getElementById("canvas"); 

     canvas.addEventListener("mousedown", function(e) 
     { 
      var ctx = canvas.getContext("2d"); 
      var x = Math.random() * 320; 
      var y = Math.random() * 480; 
      var w = Math.random() * 100; 
      var h = Math.random() * 100; 

      ctx.fillStyle = "#FF0000"; 

      ctx.fillRect(x,y,w,h); 
     }, false); 
    </script> 
</body> 
</html>

Nguồn

2012-06-03 Gautam

lẽ: document.addEventListener ("selectstart", function() {return false;}); và tương tự cho sự kiện kéo ... – Zevan

Thật không may là không giúp được gì. Thậm chí đã thử thêm sự kiện trên canvas. – Gautam

Edit: Hóa ra EaselJS vẫn có lỗi mà các liên lạc cho thấy một lựa chọn. Để giải quyết này tôi đã thêm một thuộc tính CSS vào khung sau khi đọc bài viết này: https://stackoverflow.com/a/7981302/66044

Cách khắc phục là: -webkit-tap-highlight-color: transparent;

Đã có thể giải quyết việc này với sự giúp đỡ của bài viết này: Prevent page scroll on drag in IOS and Android

Đây là mã hoạt động. Việc sửa chữa là trong việc xử lý các sự kiện touchstart/end để xử lý các nhấp chuột. Không còn trải nghiệm giai đoạn lựa chọn màu da cam.

Tested này trong cả 2.2 giả lập và điện thoại của tôi (Samsung Captivate chạy CyanogenMod ICS)

<!doctype html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <canvas id="canvas" width="320" height="480"></canvas> 
    <script type="text/javascript" src="cordova-1.7.0.js"></script> 
    <script type="text/javascript"> 
     var canvas = document.getElementById("canvas"); 

     // FIX: Cancel touch end event and handle click via touchstart 
     document.addEventListener("touchend", function(e) { e.preventDefault(); }, false); 
     canvas.addEventListener("touchstart", function(e) 
     { 
      var ctx = canvas.getContext("2d"); 
      var x = Math.random() * 320; 
      var y = Math.random() * 480; 
      var w = Math.random() * 100; 
      var h = Math.random() * 100; 

      ctx.fillStyle = "#FF0000"; 

      ctx.fillRect(x,y,w,h); 

      // FIX: Cancel the event 
      e.preventDefault(); 
     }, false); 
    </script> 
</body> 
</html>

Nguồn

2012-06-03 13:36:28 Gautam

Cảm ơn! Tôi chỉ cần phần CSS, nhưng tôi không thể tin rằng khó có thể tìm thấy bất kỳ ai khác có cùng vấn đề với nhấp nháy mỗi khi tôi chạm vào nút đang hoạt động trên trang web dành cho thiết bị di động của mình. Nó đã rất mất tập trung và không trực quan hữu ích cho khách truy cập của tôi kể từ khi tôi cung cấp cho họ đủ phản hồi trực quan, ngay lập tức mà không có "nhấp nháy" ... – exoboy

-webkit-tap-nổi bật-color: rgba (0,0,0,0);/* Tạo vùng chọn liên kết trong suốt, điều chỉnh giá trị cuối cùng opacity 0 để 1,0 */

see: https://github.com/phonegap/phonegap-start/blob/master/www/css/index.css

Nguồn

2013-02-09 01:52:33 Henry

Nhấp chuột (hoặc chạm) sự kiện trên canvas khiến lựa chọn sử dụng HTML5, Phonegap và Android

Trả lời

Các vấn đề liên quan