首页 专题 H5案例 前端导航 UI框架

用户交互

作者:TG 日期: 2016-06-04 阅读: 536
在前面的文章中,我们介绍了在canvas中绘制矩形、绘制文本、使用图像等等一系列的方法,但是,此时的canvas就好像一张多彩的静态照片,并没有和用户产生交互,所以,这一章节中,我们一起来看看如何实现用户交互!
用户交互基于事件,一般来说包括:鼠标事件触摸事件键盘事件

一、事件
在JavaScript中,我们用addEventListener() 方法用于向指定元素添加事件句柄.

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值,用于描述事件是冒泡还是捕获。该参数是可选的。
冒泡和捕获
事件传递有两种方式:冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢? 在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。 在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

使用 removeEventListener() 方法来移除事件的监听。

element.removeEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数,需要注意的是function,即移除事件的函数,这里只能写函数名,而不能像添加事件一样将整个功能函数全部写入。 第三个参数是个布尔值,用于描述事件是冒泡还是捕获。该参数是可选的。

二、鼠标事件
鼠标事件一共可以分为: mousedown mouseup click dbclick 双击 mousewheel 滚轮 mouseover mouseout

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

在上面的每一个鼠标事件中,我们都可以通过(pageX和pageY)这两个属性获取鼠标的位置。通过pageX和pageY,还有canvas元素的偏移位置,我们就能够计算出鼠标相对于canvas元素的位置。但是,有一些浏览器还是不支持这两个属性的,所以,我在这里使用了clientX和clientY来兼容不同的浏览器。

现在,我们添加一个函数captureMousePoint()。

window.tool={}; window.tool.captureMousePoint=function(element){ var mousePoint={x:0,y:0}; element.addEventListener("mousemove",function(event){ var event=event || window.event; var x=0,y=0; if(event.pageX || event.pageY){ x=event.pageX; y=event.pageY; }else{ x = event.clientX + document.body.scrollLeft +document.documentElement.scrollLeft; y = event.clientY + document.body.scrollTop +document.documentElement.scrollTop; } x -= element.offsetLeft; y -= element.offsetTop; mousePoint.x = x; mousePoint.y = y; },false); return mousePoint; };

documentElement 和 body 相关说明: body是DOM对象里的body子节点,即 <body> 标签; documentElement 是整个节点树的根节点root,即<html> 标签;

上面的captureMousePoint()方法将DOM元素作为参数传入,这样我们只要将canvas传入就可以获取到鼠标在当前canvas的位置。

var aa=tool.captureMousePoint(cc); document.getElementById("canvas").addEventListener("mousedown",function(){ console.log(aa); });


三、键盘事件

键盘事件有两个: keydown keyup

我们将键盘事件绑定到window上:

window.tool.captureMoveDirection=function(event){ var event=event || window.event; var direction=null; switch (event.keyCode) { case 38: direction="up"; break; case 40: direction="down"; break; case 37: direction="left"; break; case 39: direction="right"; break; default: direction=null; } return direction; }

调用:

window.addEventListener('keydown', function(event){ var direction=tool.captureMoveDirection(event); console.log(direction); }, false);


四、触摸事件


触摸事件包括以下3种: touchstart touchend touchmove

window.tool.captureTouchPoint = function(element) { var touchPoint = { x: null, y: null, isPressed: false, event: null }; // 绑定touchstart事件 element.addEventListener('touchstart', function(event) { touchPoint.isPressed = true; touchPoint.event = event; }, false); // 绑定touchend事件 element.addEventListener('touchend', function(event) { touchPoint.isPressed = false; touchPoint.x = null; touchPoint.y = null; touchPoint.event = event; }, false); //绑定touchmove事件 element.addEventListener('touchmove', function(event) { var x, y, touch_event = event.touches[0]; //第一次touch if (touch_event.pageX || touch_event.pageY) { x = touch_event.pageX; y = touch_event.pageY; } else { x = touch_event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = touch_event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } //减去偏移量 x -= offsetLeft; y -= offsetTop; touchPoint.x = x; touchPoint.y = y; touchPoint.event =touch_event; }, false); //返回touch对象 return touchPoint; }



关注”全栈技术杂货铺“

全栈技术杂货铺