zoukankan      html  css  js  c++  java
  • ISO处理jq事件

    jq事件在IOS上,如果标签本身不具备某些功能,而我们通过document或者body绑定上去的话,有些事件是不起作用的,同时在IOS上jq事件也存在延迟。

    事件不起作用

    这里点击事件为例,在IOS中本身默认不可点击的元素,如(div, span),此时点击事件会失效。

    解决办法

    1. 将click事件直接绑定到目标元素。
    2. 将目标元素换成 a 标签或者 button 等可以点击的元素。
    3. click事件委托到非 document 或者 body 的父级元素上。
    4. 给目标元素加一条样式规则 cursor: pointer。

    说明:

        1、具体的方法按照自己的遇到的情况而决定。

        2、如果动态增加的元素绑定事件的时候,如果离不开 document 或者 body 的话,为了避免事件,我们只能将操作的标签换成 a 或者 button。

    事件延迟

    移动浏览器为什么会设置300毫秒的等待时间呢?这与双击缩放的方案有关。平时我们有可能已经注意到了,双击缩放,即用手指在屏幕上快速点击两次,可以看到内容或者图片放大,再次双击,浏览器会将网页缩放至原始比例。

    浏览器捕获第一次单击后,会先等待一段时间,如果在这段时间区间里用户未进行下一次点击,则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作,则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

    解决办法

    方法一、进制缩放

    <meta name="viewport" content="width=device-width user-scalable= 'no'">  

    方法二、fastclick.js

    FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之,FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。

    第一步:在页面中引入fastclick.js文件。

    <script src="fastclick.js"></script>

    第二步:在js文件中添加以下代码
    在 window load 事件之后,在body上调用FastClick.attach()即可

      1 window.addEventListener(function(){
      2     FastClick.attach( document.body );
      3 },false );

    如果你项目使用了JQuery,就将上面的代码改写成:

    $(function() {    
        FastClick.attach(document.body);    
    });  
    方法三:指针事件

    指针事件最初由微软提出,现已进入 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。指针事件是一个新的 web 事件系列,相应的规范旨在使用一个单独的事件模型,对所有输入类型,包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等,进行统一的处理。
    指针事件 (Pointer Events) 目前兼容性不太好,不知道在以后会不会更加支持。

  • 相关阅读:
    (数据科学学习手札21)sklearn.datasets常用功能详解
    (数据科学学习手札20)主成分分析原理推导&Python自编函数实现
    (数据科学学习手札19)R中基本统计分析技巧总结
    (数据科学学习手札18)二次判别分析的原理简介&Python与R实现
    P2633|主席树+dfs序+树链剖分求lca+离散化
    主席树|求区间第k小模板
    树上问题
    数据结构|序列问题与树上问题小结
    珂朵莉树 例题小结
    CF#609E|二分+树状数组
  • 原文地址:https://www.cnblogs.com/jayafs/p/7270293.html
Copyright © 2011-2022 走看看