如何修复移动浏览器上 touchend 事件不触发的bug_百度知道
如何修复移动浏览器上 touchend 事件不触发的bug
我有更好的答案
游戏的话，不管是看视频还是玩游戏，玩游戏是不用担心卡顿甚至卡死的现象的,总的来说，都是非常不错的，打开网页的速度是非常能够保证的，稳定性好的浏览器就可以，因为它是采用的自主的u3内核，手机uc浏览器，还是不错的，相比其他的浏览器来说
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁移动端页面touch会&穿透&的解决方案
移动端页面touch会&穿透&的解决方案，有需要的朋友可以参考下。移动端页面touch会&穿透&的解决方案1.移动端页面touch会穿透 是指当H5页面在移动端显示时，因为click事件有300ms的延迟，所以最好用touch 事件，touch事件分为
1.touchstart：手指放在一个DOM元素上。2.touchmove：手指拖曳一个DOM元素。3.touchend：手指从一个DOM元素上移开。touch会“穿透”是在重叠的区域里，被遮盖的元素绑定click，遮盖的元素绑定touch事件，且touch后遮盖的元素会隐藏的话，就会造成穿透，因为click是在touch之后延迟触发的，浏览器会误认为是在遮盖的元素上触发了click。移动端的click都是touch之后，才会模拟触发。触发的顺序是touchstarttouchmovetouchendmousedownmousemovemouseenterclick2.解决的方案是：遮盖的元素绑定touchend事件，且触发该touchend事件时把被遮盖的元素设置为不可点击如： $(&#picList&).css(&pointer-events&,&none&);同时给遮盖的元素绑定click事件,在该click事件里实现阻止事件冒泡如： $('.tab1').on('click',function(event){
var evt = event || window. //IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法 evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble=true);
});3.css中pointer-events属性auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。让鼠标穿透该对象，不捕获鼠标事件 版权声明：本文为博主原创文章，未经博主允许不得转载。
最新教程周点击榜
微信扫一扫移动端页面touch会穿透，这是bug么？_问答_ThinkSAAS
移动端页面touch会穿透，这是bug么？
移动端页面touch会穿透，这是bug么？
touch事件会穿透页面，电脑上chrome模拟不会有，但手机上实际操作会出现
穿透（点穿）是在mobile各种浏览器上发生的常见的bug。可能是由click事件的延迟或者事件冒泡导致。
移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug（Zepto的事件都绑在Document上）。
常用的解决方案如下：
1 使用，这个可以非常完美的解决点穿问题。
2 在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。
移动端的click都是touch之后，才会模拟触发。
触发的顺序是
touchstart
mouseenter
在重叠的区域里，被遮盖的元素绑定click，遮盖的元素绑定touch事件，且touch后遮盖的元素会隐藏的话，就会造成穿透，因为click是在touch之后延迟触发的，浏览器会误认为是在遮盖的元素上触发了click。
最好的解决方案是 自己通过touchstart，touchmove，touchend，来模拟一个click（tap）事件，这样除了防止穿透外，事件响应速度也会提高。
今天我也碰到了这个问题, 最后用区域点击来替代.
假如发生穿透(或者说你需要点击)的元素在一个固定的位置.
那你可以获取这个元素的位置和大小,
然后在点击的时候获取手指的坐标, 确定这个坐标在元素所处的位置, 你就可以执行相应的操作.
期间会用到 touches[0].pageX, touches[0].pageY, document.body.scrollTop 这三个属性.
这种替代方法适用于少量的模拟, 比如我在做的这个, 位置固定在顶部, 只有打开和关闭两种情况.
菜单关闭的情况下按钮位于右上角,
菜单打开以后, 按钮被推到偏左上角.
这些位置都是可以计算得出来的.
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
官方1群：【已满】
让ThinkSAAS更好，把建议拿来。
关注微信，更好学习&&　　以前也在UC上面栽过几个坑，不过都是页面显示方面的。上个周的时候，商品详情页重做，要添加个上拉显示详情的效果。　　有两个条件需要判断：　　　　1、是否到达底部；　　　　2、到达底部之后拖动的y轴距离。　　效果写完后，本地chrome模拟和手机chrome测试OK，在手机QQ、微信内置浏览器以及UC出现BUG。　　经多次测试发现在UC中有如下几个问题：　　　　1、touch事件的顺序不一致　　　　　手指触摸后进行拖动操作然后离开屏幕，在chrome里面的顺序是：touchstart-&touchmove-&touchend。　　　　　而在UC下面的顺序是touchstart-&touchmove，然后就没有了！touchend绑定的函数死活都不触发。　　　　　后来查了下，UC在触摸结束离开屏幕的时候触发的事件是touchcancel，得同时对touchcancel进行判断。　　　　2、touchcancel函数最后计算出来的差值也不一致&　　　　　手指在屏幕进行拖动操作的时候，在chrome里面会生成touchmove*n个事件。　　　　　 而在UC里面，之后在拖动的最初会触发一个touchmove事件，对，就是一个！　　　　　 所以拖动同样的距离，在UC里面计算出来的差值基本上都是个位数。&测试代码如下所示：&!DOCTYPE html&&html lang="en"&&head&&meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"&&meta name="apple-mobile-web-app-capable" content="yes"&&meta name="apple-mobile-web-app-status-bar-style" content="black"&&meta name="format-detection" content="teleph/span>&&meta http-equiv="Expires" CONTENT="-1"&&meta http-equiv="Cache-Control" CONTENT="no-cache"&&meta http-equiv="Pragma" CONTENT="no-cache"&&meta charset="UTF-8"&&title&uc touch test&/title&&style type="text/css"&#touchBox {margin: 100px auto; width: 300px; height: 300px;border: 1px solid #000;}p {color:#000;}&/style&&/head&&body&&div id="touchBox"&&p&初始: &span id="coordStart"&&/span&&/p&&p&移动：&span id="coordMove"&&/span&&/p&&p&结束：&span id="coordEnd"&&/span&&/p&&p&事件：&span id="moveEvent"&&/span&&/p&&/div&&/body&&/html&&script type="text/javascript"&var x,y,ex,ey,mx,
var s = document.getElementById('coordStart'),
m = document.getElementById('coordMove'),
e = document.getElementById('coordEnd'),
ev = document.getElementById('moveEvent'),
b = document.getElementById('touchBox');
b.addEventListener("touchstart",touchStart,false);
b.addEventListener("touchmove",touchMove,false);
b.addEventListener("touchend",touchEnd,false);
b.addEventListener("touchcancel",touchCancel,false);
function touchStart(){
var touch = event.targetTouches[0];
x = touch.pageX;
y = touch.pageY;
s.innerHTML = x+","+y;
function touchMove(){
var touch = event.targetTouches[0];
mx = touch.pageX;
my = touch.pageY;
ex = x - touch.pageX;
ey = y - touch.pageY;
m.innerHTML = mx+","+
function touchEnd(){
ev.innerHTML ='touchend';
e.innerHTML = ex+","+
function touchCancel(){
ev.innerHTML ='touchcancel';
e.innerHTML = ex+","+
&/script&&&
以上就介绍了UC浏览器中touch事件的异常记录，包括了方面的内容，希望对Javascript教程有兴趣的朋友有所帮助。
本文网址链接：/article/detail_203982.html
上一篇： 下一篇：移动端页面开发过程中经常碰到的一些问题-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> 移动端页面开发过程中经常碰到的一些问题
移动端页面开发过程中经常碰到的一些问题
时间：&&&文章来源：马海祥博客&&&访问次数：
对于前端开发者来说移动端存在着很多的挑战，移动端页面开发过程中会碰到各种各样千奇百怪的问题，那么今天我为大家分享移动端页面开发过程中的一些问题和解决问题的方法技巧。
移动端页面在不同设备、不同操作系统、不同运行环境下都可能造成各种各样的没有碰到过的的坑，相比曾经的IE6来说，现在的问题要多了很多。
现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作，就目前的状况来看，手机页面的兼容性要比PC端更为复杂（当然主要是只在android端，大家懂的），而且有些样式在PC端页面上可能没什么，但是一旦到了手机页面，那就有可能是&大坑&，下面是本人自己开发手机页面过程中总结的一些问题，在此借助马海祥博客的平台跟大家分享一下，避免以后再次去犯。
访问者对网站的第一印象就是网页的外观，一个好的网页外观能带给人绝妙的视觉效果，视觉效果好的页面背景，可以为网站起到锦上添花的作用，还可能让访问者对网站留下深刻的印象（具体可查看马海祥博客《》的相关介绍）。
A、页面高度渲染错误
在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉：
document.documentElement.style.height = window.innerHeight + 'px';
B、叠加区高亮
在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：
-webkit-tap-highlight-color:rgba(0,0,0,0);
关于行为方面，我这里主要跟大家分享一下事件无法被触发和active效果不兼容的问题：
A、事件无法被触发
在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况，我们针对需要输入或者触发事件的元素设置样式：-webkit-transform: translate3d(0,0,0) ，不过新版本的微信已经直接修复了该问题。
B、:active 效果不兼容
在android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法:
var element=document.getElementsById(&btnShare&);
element.addEventListener(&touchstart&,function(){},false);
在开发面向现代智能手机的移动Web应用的时候，无法避免一个事实，就是需要开发页面应用，对于不同的系统需求，页面应用的粒度会不同，可能是整个系统都使用一个页面装载，也可能是按模块分为独立页面装载，对此，我们也不妨来看一下在应用过程中经常遇到的一些问题及解决方法：
A、浏览器崩溃
var act = function(){
&window.removeEventListener('devicemotion',act);
window.addEventListener('devicemotion',act,false);
解绑函数写在了事件处理中导致小米手机中的微信崩溃，那么我们不要将解绑时间写在事件处理中即可。
B、预加载、自动播放无效
如上表所示，经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载:
//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
C、无法同时播放多音频
在android设备中，播放后一音频会打断前一音频，而不会同步播放，这个是目前系统资深决定的，我们只有采取优雅降权的方法让android选择不一样风格的音频前后切换播放而不是同时播放，达到与预期接近的音频效果。
D、不支持局部滚动
在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效，这里有两种解决方案：
①、巧用布局直接设置样式滚动条在body(html)上，其他元素&错觉滚动&。
②、利用iscroll、自写js控制translate、scrollTop模拟。
4、系统/硬件
关于系统或硬件方面，我主要碰到以下几个问题，在此，也简单的跟大家描述一下，并提供一下解决方法：
A、怪异悬浮的表单
在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security:隐藏输入密码从而解决。
B、错误出现滚动条
在游戏内嵌页中出现了不应该出现的滚动条，而且内容并没有超出内容区宽度，经过测试overflow:hidden无效，通过一系列尝试使用古老的 &body scroll=&no&& 写法解决，多尝试一下不同的写法和属性会有不一样的惊喜哦！
C、链接打开系统浏览器
在游戏内webview的部分android机型中可能会出现点击链接调用系统浏览器的情况，这是一个非常不好的体验，那么我们尝试给这个元素添加 target=&_blank& 属性有可能解决，如果还不能解决那么需要修改IOS或android原生系统函数了。
D、Flex box 不兼容
在游戏内嵌webview中碰到Flex box布局不兼容的情况，图中所示下面部分的导航错位了，虽然之前有仔细查看过Flex box的兼容性，但是在游戏内嵌页中无法确定其调用的系统浏览器版本及兼容，导致错误，所以我们写完整历史版本的3种Flex box解决，那么我们思考在写页面过程中还是本着保守稳定的方式书写样式可以减少一些不必要的麻烦。
5、代码属性的问题
在移动端页面开发过程中，由于技术还不够完善和稳定，我们也经常会因为代码属性的问题导致页面出现很多千奇百怪的问题，这也是开发人员最为烦恼的问题，在此，马海祥也分享几个常见的问题：
（1）、overflow-x
这真的是一个大坑，一旦你在body或者html上用了这个属性，对不起，如果你的页面出现滚动条的话，那就会出现莫名其妙的bug，滑动页面的时候fix在顶部或者底部的会挡住，不知道有人遇到这样的情况没有，我是遇到了，坑死了。
解决办法：html跟body不要使用这个属性，如果不想让横向出现滚动，就用overflow:overflow-y:
（2）、calc()
这个本就是css3中的新方法，用起来其实是很爽的，无奈android不支持，大家最好别用，除非你不考虑android用户。
（3）、display:fix
这个是css3的新属性，用来做弹性布局的，ios上是十分OK的，然而android不支持，为了不被坑，别用。
（4）、-webkit-overflow-scrolling:touch
这个属性不是坑，他是用来让ios上的滚动条更加顺滑流畅的，亲测android上没有啥大的变化，但是ios有，不算坑，为了增强用户体验，大家可以用上，给出现滚动条的标签加上这个样式。
（5）、jquery中的html()方法
如果input的type为tel类型，然后你用html()方法取出某个值填入这个input，这个input在android手机上会显示诸如&&a href=&faketel:****&&&/a&&类似的字符窜。
解决办法就是用text()方法去取这个值然后填入这个input中，说白了还是html()跟text()方法的用法不一样，html()方法取的是html的内容，并非是纯文本，而text()方法取出的是纯文本，不会被浏览器解析，算是一个教训！
（6）、keyup和keydown在IOS设备上失效
如果你在IOS设备上用第三方输入法是无法用keyup事件来监听的，因为ios系统做了屏蔽机制，第三方输入法的事件系统是不管的，那么我们可以换种思路，去监听input的值变化事件，替换方案如下：
$('#input').bind('input propertychange', function() {
&&&&&&&&&&&&&&& alert(&....&)
&&&&&&&&&&& });
（7）、给body加position:relative
比如给移动页面做个弹幕的效果，在body里面会有个div一直滚动，从右向左，然后这个div是absolulte的，那一定要给body加relative，否则ios的手机会出现横向滚动条。
7、学会如何去解决问题
面对这么多坑，还有各种各样已经的和未知的坑，时间上也不可能一一讲完，更不可能都已经有解决方案，我们需要学会如何去解决这些问题。
解决坑首先自己需要有个强有力的执行力，通过不断去尝试来探索未知的问题，那么一般我们会通过哪些方式哪些步骤和技巧来尝试呢？
（1）、定位问题
首先我们需要定位问题，我们可以使用下列方法：
A、DOM隔离定位法
不断由大范围到小范围隔离出DOM，从而找出、触发问题的DOM元素。
B、样式、JS剔除法
不断剔除一些JS、CSS观察调试检查是否是由部分JS、CSS属性引起问题。
C、多运行环境测试法
在多环境中测试，排查是否是由于特定环境引起（具体可查看马海祥博客《》的相关介绍）。
D、PC与手机联合调试法
联合PC与手机进行定位，如：通过Mac远程调试iPhone/iPad。
（2）、解决问题的方式
我们解决问题可以尝试如下的方式：
* 尝试、转思维、绕解决
* 优雅降权、区分处理、沟通
* 搜索与提问&&
和以下的思维：
（3）、学会解决问题
在解决问题的过程中我们需要学会利用搜索和沟通资源解决问题：
A、google、百度
B、行业博客及社区
C、同事、朋友、QQ群、论坛等。
搜索引擎和行业博客及社区让你更容易更精确的快速搜索出问题相关的资料，同时、朋友QQ群、论坛等让你可以直接的跟人沟通出别人所遇到的问题及解决方案。
（4）、学会如何总结问题
在发现、解决问题后，更重要的是要学会如何总结问题：
A、总结记录问题产生条件、解决方法和解决过程。
B、尽可能分析原理、产生的条件，避免重蹈覆辙。
C、分享给更多的人。
无穷无尽的坑，走的人多了，总结分享的多了，坑也就越来越平了。
我在总结记录问题的同时，整理了一个移动端小贴士，记录问题与一些坑，虽然目前还不完善但是希望能分享给更多的人也希望更多的人能参与完善。
马海祥博客点评：
对于移动端网页，用户体验始终是大问题，交互式使用好的客户端可以在很多方面给用户带来不同的感觉和享受，因此，重视移动端的用户体验，就可以给客户端增加很多意想不到的功能，这样赋予这种软件其他的不同凡响，渐渐的就能让用户越积越多，这样才是交互功能一种好的体现。
本文为原创文章，如想转载，请注明原文网址摘自于/ydseo/1529.html，注明出处；否则，禁止转载；谢谢配合！
下一篇：没有了
您可能还会对以下这些文章感兴趣！
据说科技界观察人士最喜爱的消遣就是讨论谷歌为什么这样做，谷歌想要干什么？，可是关于这个问题到目前为止……
8月22日上午消息，360董事长周鸿祎今日在第二季度财报电话会议上表示，360全站推自主搜索引擎以来，流量增……
近日，看到百度副总裁李明远在颠覆2014-移动APP开发者论坛活动现场发表了关于百度移动变化趋势的演说，清晰……
作为一名资深SEO工作者，我一直反对SEO作弊行为，始终提倡白帽SE……
用户体验 是近来年在站长圈里流行的一个词，其实用户体验无处不……
目前国内网站的安全问题十分严峻，众多网站由第三方代建，维护人……
每个网站都有一个独立的域名，对于搜索引擎来说就是网站的门面，……
站群在灰色产品和行业内做的比较多，因为这方面的产品和服务都是……
Alexa排名是指网站的世界排名，主要分两种：综合排名和分类排名……
本月热点文章