如何模拟触发touchstart事件_百度知道
如何模拟触发touchstart事件
我有更好的答案
touchstart：触摸开始的时候触发touchmove：手指在屏幕上滑动的时候触发touchend：触摸结束的时候触发而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：touches：当前位于屏幕上的所有手指的列表。targetTouches：位于当前DOM元素上手指的列表。changedTouches：涉及当前事件手指的列表。每个触摸点由包含了如下触摸信息（常用）：identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）target：DOM元素，是动作所针对的目标。
采纳率：93%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。移动端触发touchstart事件后同时阻止click事件触发
在移动端，手指点击一个元素，会经过：touchstart --& touchmove -& touchend
--》click。
事件流本身会持续进行下去的。
做了几个demo验证了一下，上面的理论。
首先给一个元素同时绑定touchstart和click事件，看谁先触发。
var content = document.querySelector(".content");
content.addEventListener("touchend", function(){
content.style.background = "#0F0";
});content.addEventListener("click", function(){
content.style.background = "#00F";
上面逻辑是给content类名的div，绑定一个touch事件和一个click事件。分别让div的背景色变成绿色和蓝色。
手机测试一下，点击一下，div是先变成绿色然后又变成蓝色。
那能不能只触发touch事件，不去触发click事件呢？查阅相关资料，发现了preventDefault()的方法，阻止事件的默认行为。
var content = document.querySelector(".content");
content.addEventListener("touchstart", function(e){
e.preventDefault();
content.style.background = "#0F0";
content.addEventListener("click", function(e){
content.style.background = "#00F";
通过preventDefault()方法，可以阻止后面事件的触发。
http://www.myexception.cn/web/1600832.html
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。十年专注于品牌网站建设，低调、高逼格、有情怀的网络应用服务商！
全国服务热线：400-680--
前面我们介绍过移动设备中一些设备事件，例如手机旋转90度、倾斜等设置放置姿态变化的四大事件orientationchange事件、MozOrientation事件、deviceorientation事件、devicemotion事件，接下由南昌网站建设公司百恒网络前端开发工程师向大介绍在移动端的触摸事件。
& & & &iOS版 Safari为了向开发人员传达一些特殊信息，新增了一些专有事件。因为 iOS设备既没有鼠标 也没有键盘，所以在为移动 Safari开发交互性网页时，常规的鼠标和键盘事件根本不够用。随着 Android 中的 WebKit 的加入，很多这样的专有事件变成了事实标准，导致 W3C开始制定 Touch Events规范（参 见 https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html）。以下介绍的事件只针对触摸设备。&
& & & &触摸事件包含 iOS 2.0软件的 iPhone 3G发布时，也包含了一个新版本的 Safari浏览器。这款新的移动 Safari 提供了一些与触摸（touch）操作相关的新事件。后来，Android上的浏览器也实现了相同的事件。触摸 事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说，有以下几个触 摸事件。&
& & & &touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。&
& & & &touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。&
& & & &touchend：当手指从屏幕上移开时触发。&
& & & &touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。&
& & & &上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在 DOM规范中定义，但它们却 是以兼容 DOM的方式实现的。因此，每个触摸事件的 event 对象都提供了在鼠标事件中常见的属性： bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。&
& & & &除了常见的 DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。&
& & & &touches：表示当前跟踪的触摸操作的 Touch 对象的数组。
& & & &targetTouchs：特定于事件目标的 Touch 对象的数组。&
& & & &changeTouches：表示自上次触摸以来发生了什么改变的 Touch 对象的数组。 每个 Touch 对象包含下列属性。&
& & & &clientX：触摸目标在视口中的 x坐标。&
& & & &clientY：触摸目标在视口中的 y坐标。&
& & & &identifier：标识触摸的唯一 ID。 ?
& & & &pageX：触摸目标在页面中的 x坐标。&
& & & &pageY：触摸目标在页面中的 y坐标。&
& & & &screenX：触摸目标在屏幕中的 x坐标。&
& & & &screenY：触摸目标在屏幕中的 y坐标。&
& & & &target：触摸的 DOM节点目标。 使用这些属性可以跟踪用户对屏幕的触摸操作。来看下面的例子。&
&!DOCTYPE html&
& & & &&title&Touch Events Example&/title&
& & & &&meta name="viewport" content="width=device-width, user-scalable=no"&
& & & &&p&Touch anywhere on the screen. This only works on an iPhone or iPod Touch running iPhone 2.x software.&/p&
& & & &&div id="output"&&
& & & &&/div&
& & & &&script type="text/javascript"&
& & & & & & & function handleTouchEvent(event){
& & & & & & & //只跟踪一次触摸&
& & & & & & & & & & &if (event.touches.length == 1){
& & & & & & & & & & & & & &var output = document.getElementById("output");
& & & & & & & & & & & & & &switch(event.type){
& & & & & & & & & & & & & &case "touchstart":
& & & & & & & & & & & & & & & & & output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
& & & & & & & & & & & & & & & & &
& & & & & & & & & & & & & &case "touchend":
& & & & & & & & & & & & & & & & & output.innerHTML += "&br&Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
& & & & & & & & & & & & & & & & &
& & & & & & & & & & & & & &case "touchmove":
& & & & & & & & & & & & & & & & & event.preventDefault(); //prevent scrolling
& & & & & & & & & & & & & & & & & output.innerHTML += "&br&Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
& & & & & & & & & & & & & & & & &
& & & & & & & & & & }
& & & & & & & }
& & & &document.addEventListener("touchstart", handleTouchEvent, false);
& & & &document.addEventListener("touchend", handleTouchEvent, false);
& & & &document.addEventListener("touchmove", handleTouchEvent, false);
& & & & &/script&
& & & &以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见，只会在有一次活动触摸操作的情况下输 出信息。当 touchstart 事件发生时，会将触摸的位置信息输出到&div&元素中。当 touchmove 事件 发生时，会取消其默认行为，阻止滚动（触摸移动的默认行为是滚动页面），然后输出触摸操作的变化 信息。而 touchend 事件则会输出有关触摸操作的终信息。注意，在 touchend 事件发生时，touches 集合中就没有任何 Touch 对象了，因为不存在活动的触摸操作；此时，就必须转而使用 changeTouchs 集合。&
& & & &这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素 时，这些事件（包括鼠标事件）发生的顺序如下：&
& & & &(1)touchstart&
& & & &(2) mouseover
& & & &(3) mousemove（一次）
& & & &(4) mousedown
& & & &(5) mouseup
& & & &(6) click
& & & &(7) touchend&
& & & &支持触摸事件的浏览器包括 iOS版 Safari、Android版 WebKit、bada版 Dolfin、OS6+中的 BlackBerry WebKit、Opera Mobile 10.1+和 LG专有 OS中的 Phantom浏览器。目前只有 iOS版 Safari支持多点触摸。 桌面版 Firefox 6+和 Chrome也支持触摸事件。&
& 本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络如转载请注明出处!
欢迎您的光顾，我们将竭诚为您服务&在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意？ - 知乎286被浏览<strong class="NumberBoard-itemValue" title="4分享邀请回答blog.youyo.name/archives/zepto-tap-click-through-research.html），现在最新版的已经修复了这个问题。在安卓4.1+的chrome浏览器上，如果在meta viewport中指定页面不可缩放，则click没有上述300ms左右的延迟10112 条评论分享收藏感谢收起window.scrollTo(0, 1);
刚开始我使用 touchend 替代 click，当触发 scrollTo 的同时，页面发生了跳转，开始我感到非常奇怪，为什么页面会跳转呢？最后，确认问题 scrollTo 动作是在 touchend 时触发，此时，并未触发click，在滚动回页面顶部时，click被触发，误中页面顶部的一个链接，导致页面发生跳转。事件触发顺序：touchend --& scrollTo(0, 1) --& click --& 点中页面顶部的链接跳转在大部分情况下，还是可以直接使用 touchend 替代，但是一定要如
答案中所说：在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值）且时间间隔较短（一般认为是200ms），且过程中未曾触发过touchmove，即可认为触发了手持设备上的“click”，一般称它为“tap”Note：这个问题不是所有手机都会发生，目前，只在魅族MX2自带浏览器被验证，下面的截图是使用三星i9100示意。132 条评论分享收藏感谢收起