移动端自定义事件

移动端的事件类型和PC端的不同,有touchstart,touchmove,touchend...

今天,用了touchstart和touchend封装了一个左右上下滑动的触发事件(这里的封装就用到了订阅者发布模式)

步骤:一、创建事件(document.createEvent(“customEvent”))

     二、初始化事件 (event.initCustomEvent("事件名称",true,true,{key:value}))

      第二。第三个参数表示是否冒泡,是否取消,第四个参数是在时间触发时携带的额外的数据,它会保存在事件对象的detail属性中

     三、分发事件   <---(发布者)

      分发给需要的dom对象

   四、DOM对象事件绑定  <---(订阅者)

思路:

  在touchstart,也就是开始触摸时获取到坐标,将这些坐标值保存在一个对象字面量中,touchend阶段再获取一次坐标值保存到对象中

然后开始比较。

<div style="width:100%;height:600px;" id="box">我是内容</div>
	<script>
		var box = document.getElementById("box");
		function swipe(obj){
			var initCoord = {	//初始化坐标
				sx : 0,			  /*模*/
				sy : 0,			/*订阅者*/
				ex : 0,			  /*式*/
				ey : 0
			}
			//监听事件,获取开始位置坐标
			obj.addEventListener("touchstart",function(e){
				// console.info(e.targetTouches[0].pageX);
				initCoord.sx = e.targetTouches[0].pageX;
				initCoord.sy = e.targetTouches[0].pageY;
			})

			//结束地点坐标
			obj.addEventListener("touchend",function(e){

				initCoord.ex = e.changedTouches[0].pageX;
				initCoord.ey = e.changedTouches[0].pageY;
				//判断向左还是向右
				if(initCoord.sx-initCoord.ex > 30){	//向左
					//创建自定义事件
					var event = document.createEvent("customEvent");
					//初始化
					event.initCustomEvent("swipeLeft",true,true,{data:"value"});
					this.dispatchEvent(event);//事件分发	//发布消息	将时间分发到事件对象上了
					// console.info("向左滑")
				}
				if(initCoord.ex - initCoord.sx >30){
					var event = document.createEvent("customEvent");
					//初始化
					event.initCustomEvent("swipeRight",true,true,{data:"value"});
					this.dispatchEvent(event);//
					// console.info("向右滑")
				}
				if(initCoord.sy - initCoord.ey > 30){
					var event = document.createEvent("customEvent");
					event.initCustomEvent("swipeUp",true,true,{data:"value"});
					this.dispatchEvent(event);
					// console.info("向上滑")
				}
				if(initCoord.ey - initCoord.sy >30){
					var event = document.createEvent("customEvent");
					event.initCustomEvent("swipeDown",true,true,{data:"value"});
					this.dispatchEvent(event);
					// console.info("向下滑")
				}
			});
		};

		swipe(box);

		box.addEventListener("swipeRight",function(e){
			console.info("向右滑",e.detail.data,e)
		})  </script>
时间: 2024-10-10 22:09:53

移动端自定义事件的相关文章

[转] 自定义事件

DebugLZQ 原文.NET自定义事件小结 关于事件各位应该都不陌生,相信每个程序员都可以拍着胸脯说“事件?我知道啊~”,可如何自定义事件?也许有人心中就不是那么底气十足了. 用很多地方都被引用到泛滥的一个例子来写吧,始作俑者就不去深究了.描述是这样的:小偷进入时,事件发送者(狗)发送狗叫事件(自定义),(事件接收者)主人订阅狗叫事件并处理(抓住小偷),事件的参数传递的是小偷的数量.下面就给出实现的具体步骤---已经在代码注释中标明,以供各位博友抽象出自定义事件的流程. using Syste

移动端click事件延迟300ms的原因以及解决办法

这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom).这也是会有上述 300 毫秒延迟的主要原因. 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作.因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕. 于是,

移动端click事件延迟300ms的原因以及解决办法[转载]

原文: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom).这也是会有上述 300 毫秒延迟的主要原因. 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作.因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕.

CustomEvent自定义事件

javascript与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.通常大家都会认为事件是在用户与浏览器进行交互的时候触发的,其实通过javascript我们可以在任何时刻触发特定的事件,并且这些事件与浏览器创建的事件是相同的. 通过createEvent方法,我们可以创建新的Event对象,这个方法接受一个参数eventType,即想获取的Event对象的事件模板名,其值可以为HTMLEvents.MouseEvents.UIEvents以及Cust

通过c# 实现自定义属性改变触发自定义事件 ,理解自定义事件及其触发过程

以下说明可解释自定义的事件的自定义触发过程: 直接上代码,内含说明(界面是两个文本框textbox1,textbox2,和一个button1,界面的Load事件,button的click事件) Form1 类(调用者端) using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; us

由自定义事件到双向绑定

前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般也都是用于项目中的一些通知机制,例如双向绑定.一起看一下如何实现自定义事件,以及基于观察者模式的双向绑定的基本原理. 浏览器自定义事件 定义 除了我们常见的click,touch等事件之外,浏览器支持我们定义和分发自定义事件. 创建也十分简单: //创建名为test的自定义事件 var event = new Event('test') //如果是需要更多参数可以这样 var event = new

由自定义事件到vue数据响应

前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般用于项目中的一些通知机制.最近正好看到了这部分,就一起看了下自定义事件不同的实现,以及vue数据响应的基本原理. 浏览器自定义事件 定义 除了我们常见的click,touch等事件之外,浏览器支持我们定义和分发自定义事件. 创建也十分简单: //创建名为test的自定义事件 var event = new Event('test') //如果是需要更多参数可以这样 var event = new Cu

Vue:Axios异步通信、计算属性、内容分发、自定义事件

1. Axios 什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API [JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF(跨站请求伪造) GitHub:https://github.com/axios/axio

【2016-11-11】【坚持学习】【Day24】【WPF 自定义控件 附加属性 自定义事件】

UserControl ,自定义控件. 这里刚刚想到一个问题.什么时候应该用usercontrol 定义一个控件.什么时候应该重写控件的template和样式,实现新效果. 引用一下人家的话:http://www.cnblogs.com/denghejun/p/3671061.html 我的理解: Usercontrol应该是一个带有功能,带有行为的控件.而一些简单的模型,样式效果,应该都可以用Template实现.它大部分是给呈现效果服务,当然,它可以带有很多事件触发器. 另外,在一些复杂的功