Pointer Event Api-整合鼠标事件、触摸和触控笔事件

更新日期: 2020-07-01阅读: 2.5k标签: 鼠标

Pointer Events api 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API。


Pointer Event 

Pointer指可以在屏幕上反馈一个指定坐标的输入设备。Pointer Event事件和Touch Event API对应的触摸事件类似,它继承扩展了Touch Event,因此拥有Touch Event的常用属性。Pointer属性如下图:


说明:

pointerId:代表每一个独立的Pointer。根据id,我们可以很轻松的实现多点触控应用。

width/height:Mouse Event在屏幕上只能覆盖一个点的位置,但是一个Pointer可能覆盖一个更大的区域。

isPrimary:当有多个Pointer被检测到的时候(比如多点触摸),对每一种类型的Pointer会存在一个Primary Poiter。只有Primary Poiter会产生与之对应的Mouse Event。

Pointer Event API核心事件:



Mouse events, pointer events和touch events 对照表



Pointer API 的好处

Poiter API 整合了鼠标、触摸和触控笔的输入,使得我们无需对各种类型的事件区分对待。

目前不论是web还是本地应用都被设计成跨终端(手机,平板,PC)应用,鼠标多数应用在桌面应用,触摸则出现在各种设备上。过去开发人员必须针对不同的输入设备写不同的代码,或者写一个polyfill 来封装不同的逻辑。Pointer Events 改变了这种状况。


Pointer API实例

使用canvas画布来展示追踪一个pointer移动轨迹:

<canvas id="mycanvas" width="400px" height="500px" style="border: 1px solid #000"></canvas>
<script type="text/javascript">
var DrawFigure = (function(){
    function DrawFigure(canvas,options) {
        var _this = this;
        this.canvas = canvas;
        this._ctx = this.canvas.getContext('2d');
        this.lastPt = null;
        if(options === void 0) {
            options = {};
        }
        this.options = options;
        this._handleMouseDown = function(event) {
            _this._mouseButtonDown = true;
        }
        this._handleMouseMove = function(event) {
            if(_this._mouseButtonDown) {
                var event = window.event || event;
                if(_this.lastPt !== null) {
                    _this._ctx.beginPath();
                    _this._ctx.moveTo(_this.lastPt.x,_this.lastPt.y);
                    _this._ctx.lineTo(event.pageX,event.pageY);
                    _this._ctx.strokeStyle = _this.options.strokeStyle || 'green';
                    _this._ctx.lineWidth = _this.options.lineWidth || 3;
                    _this._ctx.stroke();
                }
                _this.lastPt = {
                    x: event.pageX,
                    y: event.pageY
                }
            }
        }
        this._handleMouseUp = function(event) {
            _this._mouseButtonDown = false;
            _this.canvas.removeEventListener('pointermove',_this.__handleMouseMove,false);
            _this.canvas.removeEventListener('mousemove',_this.__handleMouseMove,false);
            _this.lastPt = null;
            console.log('移除事件');
        }
        
        DrawFigure.prototype.init = function() {
            this._mouseButtonDown = false;
            if(window.PointerEvent) {
                this.canvas.addEventListener('pointerdown',this._handleMouseDown,false);
                this.canvas.addEventListener('pointermove',this._handleMouseMove,false);
                this.canvas.addEventListener('pointerup',this._handleMouseUp,false);
            } else {
                this.canvas.addEventListener('mousedownn',this._handleMouseDown,false);
                this.canvas.addEventListener('mousemove',this._handleMouseMove,false);
                this.canvas.addEventListener('mouseup',this._handleMouseUp,false);
            }
        }
        
    }
    return DrawFigure;
}());
window.onload = function() {
    var canvas = document.getElementById('mycanvas');
    var drawFigure = new DrawFigure(canvas);
    drawFigure.init();
}
</script>

 结果如图所示:



 多点触控实例

 首先初始一个多个颜色的数组,用来追踪不同的pointer。

var colours = ['red', 'green', 'blue', 'yellow','black'];

画线的时候通过pointer的id来取色。

 multitouchctx.strokeStyle = colours[id%5];
 multitouchctx.lineWidth = 3; 

在这个demo中,我们要追踪每一个pointer,所以需要分别保存每一个pointer的相关坐标点。这里我们使用关联数组来存储数据,每个数据使用pointerId做key,我们使用一个Object对象作为关联数组,用如下方法添加数据:

// This will be our associative array
var multiLastPt=new Object();
...
// Get the id of the pointer associated with the event
var id = e.pointerId;
...
// Store coords
multiLastPt[id] = {x:e.pageX, y:e.pageY};

 完整代码:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
    html,body{
        margin:0;
        padding:0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
</head>
<body ontouchstart="return false;">
<canvas id="mycanvas"></canvas>
<script type="text/javascript">
var DrawFigure = (function(){
    function DrawFigure(canvas,options) {
        var _this = this;
        this.canvas = canvas;
        this.canvas.width = document.documentElement.clientWidth;
        this.canvas.height = document.documentElement.clientHeight;
        this._ctx = this.canvas.getContext('2d');
        this.lastPt = {};
        if(options === void 0) {
            options = {};
        }
        this.options = options;
        this.colours = ['red', 'green', 'blue', 'yellow', 'black']; // 初始一个多个颜色的数组,用来追踪不同的pointer
        this._handleMouseDown = function(event) {
            _this._mouseButtonDown = true;
        }
        this._handleMouseMove = function(event) {
            var id = event.pointerId;
            if(_this._mouseButtonDown) {
                var event = window.event || event;
                if(_this.lastPt[id]) {
                    _this._ctx.beginPath();
                    _this._ctx.moveTo(_this.lastPt[id].x,_this.lastPt[id].y);
                    _this._ctx.lineTo(event.pageX,event.pageY);
                    _this._ctx.strokeStyle = _this.colours[id%5]; // 画线的时候通过pointer的id来取色
                    _this._ctx.lineWidth = _this.options.lineWidth || 3;
                    _this._ctx.stroke();
                }
                _this.lastPt[id] = {
                    x: event.pageX,
                    y: event.pageY
                }
            }
        }
        this._handleMouseUp = function(event) {
            var id = event.pointerId;
            _this._mouseButtonDown = false;
            _this.canvas.removeEventListener('pointermove',_this.__handleMouseMove,false);
            _this.canvas.removeEventListener('mousemove',_this.__handleMouseMove,false);
             delete _this.lastPt[id];
        }
        
        DrawFigure.prototype.init = function() {
            this._mouseButtonDown = false;
            if(window.PointerEvent) {
                this.canvas.addEventListener('pointerdown',this._handleMouseDown,false);
                this.canvas.addEventListener('pointermove',this._handleMouseMove,false);
                this.canvas.addEventListener('pointerup',this._handleMouseUp,false);
            } else {
                this.canvas.addEventListener('mousedownn',this._handleMouseDown,false);
                this.canvas.addEventListener('mousemove',this._handleMouseMove,false);
                this.canvas.addEventListener('mouseup',this._handleMouseUp,false);
            }
        }
        
    }
    return DrawFigure;
}());
window.onload = function() {
    var canvas = document.getElementById('mycanvas');
    var drawFigure = new DrawFigure(canvas);
    drawFigure.init();
}
</script>
</body>
</html>

 手机效果如图所示:


    链接: https://fly63.com/article/detial/9413

    CSS 鼠标样式

    设置鼠标指针放在一个元素边界范围内时所用的光标形状,需要对元素的css属性cursor进行设置。cursor属性可能的值:要实现鼠标移上去显示手形、需要在你的提交按钮上增加css cursor属性,并将它的值设置为pointer;

    计算鼠标移动的精确速度

    要达到无论在什么机器上,算出来的速度是一样的。计算两次mousemove之间的位移和时间,就可以算出精确的速度,不要将onMousemove的调用时间间隔看成是均等的,事实上也不是均等的

    JS中鼠标左右键以及中键的事件

    有时候需要判断鼠标的事件,除了使用的click事件,只有鼠标左键有效,而右键无效。而对于onmousedown、onmouseup的时候鼠标的事件左键/右键有效。以下总结鼠标三个按键操作:

    three.js鼠标控制物体旋转

    当我们需要固定场景背景,固定摄像机的时候。移动旋转物体可以使用Three.js提供的OrbitControls.js,也可以手动写控制器。原理:获取鼠标点击的位置与移动的距离,根据移动的距离计算出大概旋转的角度。

    获取鼠标位置(区分event对象中的 clientX、offsetX、screenX、pageX )

    作用:都是用来获取鼠标的位置;client直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度

    javascript如何判断鼠标是否在div区域内?

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML

    javascript如何判断鼠标左键是否被按下?

    怎么在javascript中判断鼠标左键是否被按下?下面本篇文章就来给大家介绍一下使用javascript判断鼠标左键是否被按下的方法。在javascript中,可以通过Event 对象的button事件属性来判断鼠标左键是否被按下。

    鼠标指针怎么换样式?

    我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。

    JavaScript DOM 鼠标拖拽

    在前端页面交互中,鼠标拖拽是一个体验良好的功能,实现鼠标拖拽需要了解鼠标行为坐标系和涉及到的许多兼容性写法。本文介绍鼠标位置的获取和、拽功能的实现以及拖拽函数的封装

    javascript 鼠标事件总结

    mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown => mouseup => click。因此一个点击事件,通常会激发几个鼠标事件。

    点击更多...

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!