web移动端开发问题总汇

1. jQuery通过on()绑定点击事件，阻止冒泡不起作用；(jQuery 1.7及以上)
问题描述：

动态添加进来的元素，直接用JQ添加click事件会发现新添加进来的元素不能直接被选取到，所以需要用事件委托(事件目标自身不处理事件，而是把处理任务委托给其父元素或祖先元素甚至根元素)的方法来实现，JQ中on()可以用来给动态添加的元素绑定事件。所以on()绑定的方法其实是在父元素上，那么在子元素中阻止事件冒泡(当一个DOM元素上的事件被触发时，该事件会向这个元素的父级元素传播，从里到外直，到事件被执行。)是没有作用的，还是会触发父元素上的事件。如果父元素绑定了click，子元素也绑定了click，不希望点击子元素时触发父元素上的事件。

解决方案：
在父元素的事件响应中，$(e.target).closest("子元素");如果成立，则return掉。(closest()返回被选中元素的第一个祖先元素。)

2. 移动端用video标签实现在移动端自动播放视频
问题及方案：
移动端的浏览器为了避免浪费用户流量，默认是不允许媒体文件自动播放的，所autoplay属性是失效的。我们可以添加一个触发事件用手动播放来模拟自动播放(video.play())且只能用”click”方法,”tap”无效。

3. web前端与APP交互
OC调JS方法，前端只需写好相应功能的方法并将方法名提供给app即可；JS调OC方法，只需要在触发事件中调用OC方法名即可。出现报错的情况时把代码放在try{}catch(e){}中确保代码可执行。

4. 移动端(zepto)点击穿透事件
问题描述：

zepto中的tap事件通过监听绑定在document上的touch事件来完成tap事件的模拟，是通过事件冒泡实现的。在点击完成时的tap事件需要冒泡到document上才会触发。而在冒泡到document之前，手指接触和离开屏幕（touchstart/touchend）是触发click事件的。因为click有300ms的延迟(为了检测是否有双击事件)，所以在执行完tap事件后，弹出层立马就隐藏了，此时click时间还在延迟的300ms中。当300ms到来的时候，click到的其实是隐藏元素的下方元素。
有多个层级绑定事件，最上层绑定了tap事件，下层绑定了click事件，在执行完上层事件后会触发下层事件，进而出现事件穿透。如果下层没有绑定click则不会发生，如果下方是input输入框(或者select/radio/checkbox)，则focus获取焦点。

出现的原因: tap和click混用

现象：
1).触摸或点击遮罩层来关闭遮罩，遮罩层消失后触发了下层元素的click事件。
2).跨页面点击穿透，点击跳转到新页面，新页面中对应位置元素的click事件被触发。
3).下方是input输入框必穿透。

解决方案：
1). 不混用tap和click。
2). tap后延迟350ms再执行隐藏事件。
3). github上有一个fastclick的插件来规避click事件的延迟执行，引入fastclick文件并用click代替tap。

5. 移动端实现国际化
PC端的国际化是用i18n插件实现，移动端实现国际化是由后台判断，后台提供中英文两个.properties文件，页面上的文字在.jsp中通过以下代码获取

<div class="page-text"><spring:message code="name"/></div>

前端配置中英文两个.js文件，根据后台返回的当前系统的类型选择加载相应的.js文件。

6. 移动端兼容问题
1). IOS端点击元素出现阴影效果
给点击元素设置CSS属性div{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0);}
2). 在IOS中跳转页面后失效，触摸滑动事件结束重新生效给被fixed的元素添加属性：transform: translate3d(0, 0, 0);

四、Notes

1. 文字溢出：overflow:hidden; 在table>td中不生效:

- 在table中使用table-layout:fixed;  - 在tb中使用div固定宽度做溢出处理。- 文字换行：强制文字在一行显示white-space: nowrap;

2. qrcode.js生成的二维码需要添加一个白色的边框才可以扫描成功。