H5之12__触摸与单击：基本的事件处理

 在html5中，  如果基于鼠标的界面互动是单击， 触摸界面的基本交互方式就是 轻触.

一.  轻触与单击有相似之处， 但是也有不同.

即使触摸设备(例如： 手机) 没有鼠标，它们的浏览器仍然会触发鼠标事件， click, mouseover,  mousedown 和 mouseup 都还会被触发。

二.  移动浏览器有四种类型的触摸事件

touches 数组 是一组触摸事件所产生的触摸对象,  触摸对象代表着触摸屏幕的手指。

三. 处理触摸事件

第一种方式，使用浏览器支持的标准触摸事件, 看一个示例 index.html :

	
	
	
	
	


	

		切换图片
		

			
Goldfinch by ibm4381 on Flickr
			
				
			
		

	

效果图如下所示,    注意： 在手机上 会响应触摸事件，不响应单击事件，    在PC 浏览器上 则相反

文希AI写作

AI论文写作平台

下载

 第二种方式,  自定义事件

使用  addEventListener来  订阅事件.  使用它可以定义何时触发事件以及事件的行为.

还是 仿照上个示例， 作些修改, 步骤如下：

1. 使用 自定义事件

node.addEventListener("tap",  function(e){
    togglePictrue();
});
node.addEventListener("touchstart",  function(e){
     var tap = document.createEvent("CustomEvent");
    tap.initCustomEvent("tap",  true,  true,  null);
    node.dispatchEvent(tap);
});

在这里 initCustomEvent  方法需要四个参数，

 ● 该事件的名称

● 该事件是否冒泡

● 该事件是否可以取消

● 详细数据，  一个任意的数据，会在初始化事件时传递过去

2. 需要添加一个touchstart  监听器，并且 单击(click) 仍然不可用。 因此要检测是否支持触摸事件， 否则降为兼容到使用鼠标事件。

function addTapListener(node, callback) {
		
		node.addEventListener('tap', callback);
		
		//一开始 定义为鼠标 按下，抬起事件,这是为PC浏览器考虑的
		var startEvent = 'mousedown', endEvent = 'mouseup';
		
		//if touch events are available use them instead
		if (typeof(window.ontouchstart) != 'undefined') {
			
			//如果判断为触摸设备，改变为触摸开始、触摸结束事件
			startEvent = 'touchstart';
			endEvent   = 'touchend';
		}
		
		//开始事件
		node.addEventListener(startEvent, function(e) {
			var tap = document.createEvent('CustomEvent');
			tap.initCustomEvent('tap', true, true, null);
			node.dispatchEvent(tap);
		});	
		
		//结束事件
		node.addEventListener(endEvent, function(e) {
			var tapend = document.createEvent('CustomEvent');
			tapend.initCustomEvent('tapend', true, true, null);
			node.dispatchEvent(tapend);
		});
	}	

调用 上述方法的代码是这样的：

addTapListener(node, function(e){
		e.preventDefault();
		e.target.className = 'active button';
		togglePicture();
});

通过这两步，基本完成了需求。

完整代码如下， tap.html:

	
	
	
	
	


	

		切换图片
		

			
Goldfinch by ibm4381 on Flickr
			
				
			
		

	

效果图如下:

可以看到 第二种方式：  自定义事件 不比第一种方式的代码少， 但它更清晰地介绍了发生了什么，  重要的是在桌面电脑上无需改动即可使用。

 以上就是H5之12__触摸与单击：基本的事件处理的内容，更多相关内容请关注PHP中文网（www.php.cn）！