发表于： 2019-10-17 23:24:16
1 809
今天完成的事情：
1 完成搜索课程页面假数据的编写
2 基本完成搜索部分
2.1 点击标签进行搜索
2.2 无课程时提示
2.3 优化取消的代码：之前是点击一次取消给他设置一个值，然后在判断具体返回哪个页面，现在直接根
据父元素传的值(父元素中搜索历史页面隐藏传的值为false ，显示传的值为true)，判断返回哪个页面
2.4 优化搜索代码：之前是点击搜索，传值给父元素，然后父元素设置显示搜索结果页面，并传值给他。
感觉有点麻烦，今天用vuex修改了一下，点击搜索后把值传给vuex中的属性，然后搜索结果页面直接
获取vuex中的属性就行
3 移动端300ms问题(之前只是了解fastclick解决)，跟点击穿透
明天计划的事情：
1 完成课程详情页面
遇到的问题：
1 img标签，宽度显示不正常
如果一开始的地址是无效的，后面地址再改成有图片的地址的时候，这个标签显示的宽度就会有问题，并不会用你设置的宽度，而是用的一开始加载不出来时候的宽度。已经了解了原因，明天修改一下。
收获：
移动端300ms，点击穿透
移动浏览器会在touchend和click 事件之间，等待300 - 350ms，判断用户是否会进行双击手势用以缩放文字，所以产生这个延迟问题。
浏览器开发商解决方案
1禁用缩放(meat内viewport进制缩放)
2更改视口默认宽度(meat内设置viewport)
3touch-action：;属性指定元素上能够触发的用户代理(浏览器)的默认行为，设为none， 不会触发用户代理的任何默认行为，就无需进行300ms的延迟判断。
非浏览器解决
1tap事件：引用框架或者自己封装
2 fastick插件：例如vue中 npm install fastclick --save，然后在main.js中设置
点透问题及解决
页面上有两个元素A和B。B在A之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。当我们点击B元素，B元素被隐藏了。随后，A元素触发了他自己的click事件。因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。
1只用touch：没有click事件，就不会有延迟，也就不会穿透。注意a标签默认click事件
2只用click：没有touchstart，也就不会先隐藏，自然也没有穿透(不推荐)
3tap后延迟300ms再隐藏mask：有用tap的情况下，但是这个隐藏变慢，能感觉到
4pointer-events： mask隐藏后，给按钮下面元素添上pointer-events: none;样式，让click穿过去，350ms后去掉这个样式，恢复响应。
5fastclick：加载这个插件。
返回列表
评论