jstouch事件判断双击

❹ js 判断双手指滑动 应该说是：在vue中如何实现 对div 双手指的放大和缩小功能。

1. 绑定触摸事件 touchstart touchmove

2. 监听触摸事件event.touches中触摸点的数量

3. 在touchmove事件做判定，如果 event.touches.length==2 则记录此次两点之间的距离：Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2))

4. 在手指移动过程中针对每一次的两点距离进行比较。如果相对上次较大则放大，否则缩小。div的缩放通过transform:scale(x)进行控制

❺ 如何js实现触屏点击事件

移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件

touchstart://手指放到屏幕上时触发
touchmove://手指在屏幕上滑动式触发
touchend://手指离开屏幕时触发
touchcancel://系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

ouches://当前屏幕上所有手指的列表targetTouches://当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches://涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX/clientY://触摸点相对浏览器窗口的位置
pageX/pageY://触摸点相对于页面的位置
screenX/screenY://触摸点相对于屏幕的位置
identifier://touch对象的ID
target://当前的DOM元素

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

<metaname="viewport"content="target-densitydpi=320,width=640,user-scalable=no">

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

案例：

下面给出一个案例，需在移动设备上才能看出效果。

1.定义touchstart的事件处理函数，并绑定事件：

if(!!self.touch)self.slider.addEventListener('touchstart',self.events,false);

//定义touchstart的事件处理函数

start:function(event){
vartouch=event.targetTouches[0];//touches数组对象获得屏幕上所有的touch，取第一个touch
startPos={x:touch.pageX,y:touch.pageY,time:+newDate};//取第一个touch的坐标值
isScrolling=0;//这个参数判断是垂直滚动还是水平滚动
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
},

触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。定义一个变量标记滚动的方向。此时绑定touchmove,touchend事件。

2.定义手指在屏幕上移动的事件，定义touchmove函数。

//移动

move:function(event){
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if(event.targetTouches.length>1||event.scale&&event.scale!==1)return;
vartouch=event.targetTouches[0];
endPos={x:touch.pageX-startPos.x,y:touch.pageY-startPos.y};
isScrolling=Math.abs(endPos.x)<Math.abs(endPos.y)?1:0;//isScrolling为1时，表示纵向滑动，0为横向滑动
if(isScrolling===0){
event.preventDefault();//阻止触摸事件的默认行为，即阻止滚屏
this.slider.className='cnt';
this.slider.style.left=-this.index*600+endPos.x+'px';
}
},

同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。

3.定义手指从屏幕上拿起的事件，定义touchend函数。

//滑动释放

end:function(event){
varration=+newDate-startPos.time;//滑动的持续时间
if(isScrolling===0){//当为水平滚动时
this.icon[this.index].className='';
if(Number(ration)>10){
//判断是左移还是右移，当偏移量大于10时执行
if(endPos.x>10){
if(this.index!==0)this.index-=1;
}elseif(endPos.x<-10){
if(this.index!==this.icon.length-1)this.index+=1;
}
}
this.icon[this.index].className='curr';
this.slider.className='cntf-anim';
this.slider.style.left=-this.index*600+'px';
}
//解绑事件
this.slider.removeEventListener('touchmove',this,false);
this.slider.removeEventListener('touchend',this,false);
},

手指离开屏幕后，所执行的函数。这里先判断手指停留屏幕上的时间，如果时间太短，则不执行该函数。再判断手指是左滑动还是右滑动，分别执行不同的操作。最后很重要的一点是移除touchmove,touchend绑定事件。

❻ js touch事件

监听事件
window.addEventListener("touchstart",function(){})

❼ 怎样在浏览器上调试touch事件

为大家介绍chrome浏览器中常用的调试功能，对于其他的浏览器，大家同样可以触类旁通。接下来->打开chrome->按F12。开始chorome调试之旅吧！
一、JS调试

选中Script标签之后，我们来到了JS调试界面。
为大家讲解一下各个区域的作用。

左上角有一个下拉框，用于选择JS文件，还有后退以及前进按钮，可以快速地返回之前调试的JS文件。

左侧的代码窗口，用处自然不必多说。在行数的地方点击鼠标可以设置断点。程序运行到断点处时，可以鼠标在代码上悬停，以查看变量、表达式的值。

右上角的几个小按钮，用于控制程序的执行（当然，要设置断点以后才有用。）功能分别为执行至下一个断点（F8）、执行至下一个函数调用结束(F10)、执行至下一个函数内部(F11)、跳出当前函数(Shift+F11)、禁用所有断点。

右侧的第一个区域，用于观察变量。点击‘+’添加你要观察的变量或者表达式，这样的话，无论程序运行到哪里，你都能够监视一些重要的值。

右侧的第二个区域是函数的调用堆栈。在这里，我们可以看到函数的嵌套调用结构，点击可以快速转到函数的所在位置。

右侧第三个区域，同样是用于观察变量的。这里分为Local和Global两个。Local里，可以看到所有的当前作用域内的变量。而Global基本可以看到所有全局变量。

右侧第四个区域，断点管理。

按Esc键快速调出下面的的控制台，在这里可以看到程序的各种输出，。包括log、警告、异常。如果我们在代码里面写了
console.log(o);语句，则o会在这里作为对象被输出，这是调试过程中比较常用的功能。该值得一提的是，在这里，我们可以直接输入代码，立即
执行。

其他区，大家自行探究吧，说了这么多，剩下的也就是孰能生巧啦。
二、CSS样式调试

好吧，这回，我们不用F12。换个cool的方法。在页面上你想调试的元素上点击右键->审查元素(N)。然后，你就快速地来到CSS调试界面，并且已经帮你定位好元素。
左侧是实时html结构。

右侧第一个区域是所有对当前元素起作用的CSS属性。

右侧第二个区可以看到文件里相应的CSS原文。

在这里，你可以直接对实时html结构进行编辑、可以对css进行编辑。重点是，你可以马上看到修改的效果，再也不用一遍又一遍地刷新页面了！

❽ JS中事件穿透深度剖析与多种解决方案

最近项目开发过程中，在ios环境下。双击（doubletap）上层元素（固定定位fix），偶尔会触发下层（瀑布流中）路由跳转。

经过部门老大指导，才了解到这个现象叫做“事件穿透”。再此俺决定研究下为什么？

电脑上一般是鼠标操作，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。

在一次点击行为中，事件的触发过程为：mousedown -> mouseup -> click 三步。

由于手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend
注意手机上并没有tap事件。 一些库例如hamer.js、zepto.js 等等都是通过处理这些原生事件，来定义不同的手势以及tap事件。

在一次点击行为中，事件的触发过程为：touchstart -> touchmove -> touchend。

有人在PC和手机上对事件做了对比实验，以说明手机对touch事件相应速度快于mouse事件。touchstart --> mouseover(有的浏览器没有实现) --> mousemove(一次) -->mousedown --> mouseup --> click -->touchend。
浏览器在 touchend 之后会等待约 300ms ，如果没有 tap 行为，则触发 click 事件。 而浏览器等待约 300ms 的原因是，判断用户是否是双击（double tap）行为，双击过程中就不适合触发 click 事件了。 由此可以看出 click 事件触发代表一轮触摸事件的结束。

ps：此处偷一张图

跟局官网描述我们可以看出：触发路由跳转的事件默认为 click

移动端chromiun 和 iOS 9.3＋ 可以用 CSS 属性来阻止元素的双击缩放进而取消点击穿透的延迟：

首先引入库：

调用：

将层的固定定位“降”下来，和下面的router-link都在瀑布流内。
注：此方法只适合部分项目。

由于 click 事件的滞后性，在这段时间内原来点击的元素消失了，于是便“穿透”了。因此我们顺着这个思路就想到，可以给元素的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画ration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。
同样的道理，不用延时动画，我们还可以动态地在触摸位置生成一个透明的元素，这样当上层元素消失而延迟的click来到时，它点击到的是那个透明的元素，也不会“穿透”到底下。在一定的timeout后再将生成的透明元素移除。

❾ js怎么使用touchmove事件

需要手动去注册，或者用第三方插件。

vardiv=document.getElementById('div');
div.addEventListener('touchstart',function(e){
	//touchstart:触摸开始的一瞬间，这里的e包含的触摸一瞬间所触摸的元素的信息
});
div.addEventListener('touchmove',function(e){
	//touchmove:触摸进行时，这里的e包含的触摸的元素信息
});
div.addEventListener('touchend',function(e){
	//touchend:触摸结束的一瞬间，这里的e没有多大的作用
});

这touch事件需要移动端的支持，pc可能不适应