
在移动端开发过程中,难免会出现点透问题。
那么什么是点透?
如下图所示:
在B元素上有半透明红色遮盖层A,黄色B元素内有可点击链接C。在“移动端”,点击事件通常采用touch相关事件来获取高效率。在点击遮盖层A的时候,touch事件触发使得A遮盖层隐藏,而黄色B元素内有可点击链接C在遮盖层隐藏之后被点击,触发click跳转到c链接对应的页面,这就是移动端点透问题发生的一种典型情况。往往这种结果都不是我们想要的。
哪些情况下会出现移动端点透问题?
1.A/B两个层上下z轴重叠。
2.上层的A点击后消失或移开。(这一点很重要)
3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件。
为甚么会出现点透问题?
在这里就跟网联科技小编一起捋一捋移动端点击事件的先后顺序问题吧!
事件的触发时间按由早到晚排列为:touchstart 早于 touchend 早于 click。
当手指触摸到屏幕的时候,系统生成两个事件,一个是touch 一个是click,touch先执行,touch执行完成后,A遮盖层从文档树上面消失了,而且由于移动端click还有延迟200-300ms的关系,当系统要触发click的时候,发现在用户点击的位置上面,目前离用户最近的黄色元素B,所以就直接把click事件作用在B元素上面了.
点透问题解决方案:
方案一:
网联科技小编小个人最推荐的是统一代码风格,在对点击时效没有高要求的情况,建议事件统一使用click事件,对于非游戏开发的情况,click的时间延迟能够给人更好的过度体验。
方案二:
对时效性要求高的情况下,如果b元素并没有默认的click事件的情况(没有a链接),统一使用touch事件,更有利于用户反应速度上的体验。
方案三:
来得很直接github上有个fastclick可以完美解决
引入fastclick.js,因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jqm的js里面加上
$(function() {
FastClick.attach(document.body);
});
当然require的话就这样:
var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);
了解更多网站建设知识
我们在微信上24小时期待您的声音
解答:网站建设、APP开发、小程序开发
网联科技是一家以提供网站建设、APP、小程序开发、CRM系统开发为主的互联网开发公司。以客户需求为导向,客户利益为出发点,结合自身设计及专业建站优势,为客户提供从基础建设到营销推广的一整套解决方案,探索并实现客户商业价值较大化,为所有谋求发展的企业贡献全部力量。
在这篇文章中,我将解释什么是社交媒体的SEO,为什么你应该关心它,以及如何利用它来发挥你的优势。
社交媒体SEO包括在你的社交媒体帖子中使用搜索引擎优化策略,以便更多的人在搜索相关关键词时点击它们。
假设你想为你的旅行计划搜索阿姆斯特丹最好的餐厅。你可以去Instagram、Pinterest、YouTube或任何其他社交媒体平台寻找创作者推荐。
以上是一个典型的例子,说明人们如何使用社交媒体搜索引擎优化来找到他们搜索查询的答案。问题范围从旅游和产品推荐到成熟的教程。
流量和转化,一直都是独立站运营的关键词。
流量难以获取,转化率低下,是独立站运营人员一直头疼的老大难题。不断地优化网页设计、优化网页内容、优化内外链、优化SEO,流量成为了决定独立站兴亡的重要因素之一。
能做的都做了,流量还是平平无奇,还有其他的优化方法吗?
"新鲜度"因素从原来的边缘地位跃升至算法中的重要位置,占比由不足1%上升至6%,成为第六大影响因素。据 firstpagesage.com 过去两个季度的数据分析,网站页面若每年至少更新一次,其在搜索引擎结果页面(SERPs)的平均排名可提升4.6位。相对于未更新的页面,这一提升尤为显著。