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。
- 移动端实现国际化
PC端的国际化是用i18n插件实现,移动端实现国际化是由后台判断,后台提供中英文两个.properties文件,页面上的文字在.jsp中通过以下代码获取
- 移动端兼容问题
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
- 文字溢出:overflow:hidden; 在table>td中不生效:
- 在table中使用table-layout:fixed;
- 在tb中使用div固定宽度做溢出处理。
- 文字换行:强制文字在一行显示white-space: nowrap;
- qrcode.js生成的二维码需要添加一个白色的边框才可以扫描成功。
作者:生如夏花_y
来源:CSDN
原文:https://blog.csdn.net/qq_35972609/article/details/77334811