兼容其他浏览器支持pointer event规范-BFW插件库

兼容其他浏览器支持pointer event规范

从2012年9月开始，Microsoft提出了统一触摸，笔和鼠标事件的规范，称为points event 指针事件。

但是现代化的浏览器尚不都支持它。仅Internet Explorer 10+和Microsoft Edge支持它，为了让其他浏览器支付，微软推出了hand.js。

使用方式：

引入hand.js，Firefox 或 Chrome 也就都可以使用 Pointer Event 了～

事件的定义

Pointer Event 总共定义了八种事件，其列表如下：
pointerdown

pointerup

pointercancel

pointermove

pointerover

pointerout

pointerenter

pointerleave

示例代码

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hand.js"></script>
<style>
* {
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;
/* prevent webkit from resizing text to fit */
/* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
/* prevent copy paste, to allow, change 'none' to 'text' */
-webkit-tap-highlight-color: rgba(0,0,0,0);
touch-action: none;
}

body {
background-color: #000000;
margin: 0px;
}

canvas {
background-color: #111133;
display: block;
position: absolute;
}

.container {
width: auto;
text-align: center;
background-color: #ff0000;
}

</style>
</head>
<body>
<div class="container">
<canvas id="canvasSurface"></canvas>
</div>
<script>

var Collection = function () {
this.count = 0;
this.collection = {};
this.add = function (key, item) {
if (this.collection[key] != undefined)
return undefined;
this.collection[key] = item;
return ++this.count
}
this.remove = function (key) {
if (this.collection[key] == undefined)
return undefined;
delete this.collection[key]
return --this.count
}
this.item = function (key) {
return this.collection[key];
}
this.forEach = function (block) {
for (key in this.collection) {
if (this.collection.hasOwnProperty(key)) {
block(this.collection[key]);
}
}
}
}
"use strict";

// shim layer with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

var touches; // collections of pointers

var canvas,
c; // c is the canvas' context 2D

document.addEventListener("DOMContentLoaded", init);

window.onorientationchange = resetCanvas;
window.onresize = resetCanvas;

function init() {
setupCanvas();
touches = new Collection();
canvas.addEventListener('pointerdown', onPointerDown, false);
canvas.addEventListener('pointermove', onPointerMove, false);
canvas.addEventListener('pointerup', onPointerUp, false);
canvas.addEventListener('pointerout', onPointerUp, false);
requestAnimFrame(draw);
}

function resetCanvas(e) {
// resize the canvas - but remember - this clears the canvas too.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

//make sure we scroll to the top left.
window.scrollTo(0, 0);
}

function draw() {
c.clearRect(0, 0, canvas.width, canvas.height);

touches.forEach(function (touch) {
c.beginPath();
c.fillStyle = "white";
c.fillText(touch.type + " id : " + touch.identifier + " x:" + touch.x + " y:" + touch.y, touch.x + 30, touch.y - 30);

c.beginPath();
c.strokeStyle = touch.color;
c.lineWidth = "6";
c.arc(touch.x, touch.y, 40, 0, Math.PI * 2, true);
c.stroke();
});

requestAnimFrame(draw);
}

function createPointerObject(event) {
var type;
var color;
switch (event.pointerType) {
case event.POINTER_TYPE_MOUSE:
type = "MOUSE";
color = "red";
break;
case event.POINTER_TYPE_PEN:
type = "PEN";
color = "lime";
break;
case event.POINTER_TYPE_TOUCH:
type = "TOUCH";
color = "cyan";
break;
}
return {
identifier: event.pointerId,
x: event.clientX,
y: event.clientY,
type: type,
color: color
};
}

function onPointerDown(e) {
touches.add(e.pointerId, createPointerObject(e));
}

function onPointerMove(e) {
if (touches.item(e.pointerId)) {
touches.item(e.pointerId).x = e.clientX;
touches.item(e.pointerId).y = e.clientY;
}
}

function onPointerUp(e) {
touches.remove(e.pointerId);
}

function setupCanvas() {
canvas = document.getElementById('canvasSurface');
c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
c.strokeStyle = "#ffffff";
c.lineWidth = 2;
}
</script>
</body>
</html>

兼容其他浏览器支持pointer event规范

网友评论0

selectivizr-min.js

html5shiv.js

jquery.placeholder.js

prefixfree.js

hand.js