1. घर
  2. सवाल और जवाब
  3. माउस क्लिक (या स्पर्श) घटनाओं जहां स्क्रीन चमक हर आप पर क्लिक करें/स्पर्श/mousedown एचटीएमएल 5, Phonegap और एंड्रॉयड

माउस क्लिक (या स्पर्श) घटनाओं जहां स्क्रीन चमक हर आप पर क्लिक करें/स्पर्श/mousedown एचटीएमएल 5, Phonegap और एंड्रॉयड

2012-06-03 9 views
13

मैं एक एचटीएमएल 5 खेल easlejs + phonegap का उपयोग करने पर काम कर रहा हूँ और एक मुद्दा में चल रहा का उपयोग कर चयन का कारण बनता है कैनवास।माउस क्लिक (या स्पर्श) घटनाओं जहां स्क्रीन चमक हर आप पर क्लिक करें/स्पर्श/mousedown एचटीएमएल 5, Phonegap और एंड्रॉयड

नीचे बहुत ही सरल कोड मैं इस मुद्दे का परीक्षण करें और देखें कि यह easlejs से संबंधित था करने के लिए बनाया है। जैसा कि आप कोड से देख सकते हैं, यह easlejs के साथ कुछ भी नहीं है और केवल एक html5/phonegap मुद्दा है।

आप देख सकते हैं कि मैंने कोई भाग्यशाली सीएसएस शैलियों को कोई भाग्य नहीं दिया है।

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>

स्रोत

2012-06-03 Gautam

+0

शायद: document.addEventListener ("selectstart", function() {return false;}); और ड्रैगस्टार्ट ईवेंट के लिए वही ... – Zevan

+0

दुर्भाग्यवश इससे मदद नहीं मिली। यहां तक ​​कि कैनवास पर घटना जोड़ने की कोशिश की। – Gautam

उत्तर

18

संपादित करें: पता चला EaselJS अभी भी बग जहां स्पर्श एक चयन से पता चला था। इस का समाधान करने के लिए मैं इस लेख को पढ़ने के बाद कैनवास करने के लिए एक सीएसएस संपत्ति कहा: https://stackoverflow.com/a/7981302/66044

ठीक था: Prevent page scroll on drag in IOS and Android

: -webkit-tap-highlight-color: transparent;

इस अनुच्छेद की मदद से इस हल करने में सक्षम था

यहां कामकाजी कोड है। फिक्स क्लिक को संभालने के लिए टचस्टार्ट/एंड इवेंट्स को संभालने में है। अब नारंगी चयन मंच का अनुभव नहीं है।

दोनों 2.2 एमुलेटर में यह परीक्षण किया गया है और मेरे डिवाइस

<!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>

स्रोत

2012-06-03 13:36:28 Gautam

+0

धन्यवाद! मुझे केवल सीएसएस भाग की आवश्यकता थी, लेकिन मुझे विश्वास नहीं है कि हर किसी को ढूंढना कितना मुश्किल था जब हर बार जब मैंने अपनी मोबाइल साइट पर एक सक्रिय बटन छुआ तो झटके के साथ एक ही समस्या थी। यह मेरे विचलितों के लिए बहुत विचलित और दृष्टिहीन रूप से सहायक नहीं था क्योंकि मैं उन्हें "झिलमिलाहट" के बिना पर्याप्त तत्काल, दृश्य प्रतिक्रिया प्रदान करता हूं ... – exoboy

संबंधित मुद्दे

 संबंधित मुद्दे