0
JavaScriptでスクラッチカードのスクリプトを作成しようとしています マウスイベントハンドラがPC上で正常に動作していますが、 私はマウスの左ボタンを押したまま、カードを傷つけるために動かします。タッチスクリーン上の 、それは私が指をタッチし続け、電話スクリーン上で指を離した場合にのみ傷つく。JavaScriptのマウスイベントハンドラがAndroidのタッチスクリーンに正しく機能しない
;(function() {
var global = this;
function ScratchCard(element, options, ownerDocument) {
// apply default arguments.
var defaultOptions = {
'color': 'gray',
'radius': 20
};
if (options) {
for (var key in defaultOptions) {
if (!(key in options)) {
options[key] = defaultOptions[key];
}
}
} else {
options = defaultOptions;
}
ownerDocument = ownerDocument || global.document;
// canvas validate.
var canvas = document.createElement('canvas');
if (typeof canvas.getContext != 'function')
return console.log('Canvas not supported.');
// apply canvas offset & size of element
var rect = element.getBoundingClientRect();
canvas.width = rect.width || rect.right - rect.left
canvas.height = rect.height || rect.bottom - rect.top;
canvas.style.top = rect.top + 'px';
canvas.style.left = rect.left + 'px';
canvas.style.position = 'absolute';
canvas.style.zIndex = +element.style.zIndex + 1;
// fill the canvas
var context = canvas.getContext('2d');
context.fillStyle = options.color;
context.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,1)";
// add mouse events to canvas
// TODO: supply touch events
// TODO: scratch from the outside
function scratchStart(event) {
if (event.button != 0) // not left button
return;
var x = event.offsetX || event.layerX;
var y = event.offsetY || event.layerY;
context.beginPath();
context.arc(x, y, options.radius, 0, Math.PI * 2);
context.fill();
canvas.addEventListener('mousemove', scratchMove);
canvas.addEventListener('touchmove', scratchMove);
document.addEventListener('mouseup', scratchEnd);
document.addEventListener('touchend', scratchEnd);
}
function scratchMove(event) {
var x = event.offsetX || event.layerX;
var y = event.offsetY || event.layerY;
context.beginPath();
context.arc(x, y, options.radius, 0, Math.PI * 2);
context.fill();
}
function scratchEnd(event) {
canvas.removeEventListener('mousemove', scratchMove);
canvas.removeEventListener('touchmove', scratchMove);
document.removeEventListener('mouseup', scratchEnd);
document.removeEventListener('touchend', scratchEnd);
}
canvas.addEventListener('mousedown', scratchStart);
canvas.addEventListener('touchstart', scratchStart);
// disable element interaction
['MozUserSelect',
'msUserSelect',
'oUserSelect',
'webkitUserSelect',
'pointerEvents']
.filter(function (cssProp) {
return cssProp in element.style;
}).forEach(function (cssProp) {
element.style[cssProp] = 'none';
});
// append canvas to body.
document.body.appendChild(canvas);
}
if (typeof module == 'object' && module.exports) {
// Node.js module
module.exports = ScratchCard;
} else if (typeof define == 'function' && (define.amd || define.cmd)) {
// AMD or CMD module
define(ScratchCard);
} else if (typeof jQuery == 'function' && typeof jQuery.extend == 'function') {
// jQuery plugin
jQuery.fn.extend({
'ScratchCard': function (options) {
return this.each(function (element) {
ScratchCard(element, options);
});
}
});
} else if (typeof angular == 'object' && typeof angular.module == 'function') {
// AngularJS module
// TODO: modify it to a directive.
angular.module('ScratchCard', [])
.value('ScratchCard', ScratchCard);
} else {
// Apply to a global variable.
if (global.ScratchCard) {
(function (oldScratchCard) {
ScratchCard.noConflict = function() {
global.ScratchCard = oldScratchCard;
return ScratchCard;
};
}) (global.ScratchCard);
}
global.ScratchCard = ScratchCard;
}
}).call(this);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!--<script type="text/javascript" src="jquery-1.11.2.min.js"></script> -->
<!-- <script type="text/javascript" src="touch.js"></script> -->
<title>ScratchCard Demo</title>
<style>
div {
\t display: inline-block;
\t padding: 5px;
\t border: 1px solid black;
}
p {
\t margin: 0;
\t /*padding: 5px;*/
\t font-size: 20px;
}
img {
width: 200px;
height: 200px;
border:10px solid #557FFF;
}
</style>
</head>
<body>
<div><p id="scratchable"><img src="sc4.jpg"></img></p></div>
<script src="ScratchCard.js"></script>
<script>ScratchCard(document.querySelector('p'));</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60834029-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>私はこのコードが間違っているかわからないが、私は本当に1の助けが必要。
しかし、私は、コードを使用することができるようにしたい：あなたは、イベントを割り当てている各場所に続いて
を、これを行います両方のデバイス、PCおよびタッチスクリーン電話用。 – wfareed
これを両方に使用すると、実行時に現在どのデバイスがページをロードしているかを検出し、実行時にそのデバイスに適したイベントのみを使用します。 – gmiley
ここのコードは正しいですか？もしそうなら、それはなぜ正しく機能していないのですか？ – wfareed