ios 点击失效、闪屏问题解决方案

时间：2022-05-28 01:41:30

一、点击失效

描述：将点击事件（click）委派在document或者body上，且目标元素为默认不可点击的元素时（非<a>、 <button>而是<span>等），点击失效。

实例代码：

<body>

    <div class="page-content">

        <ol class="scence-hot">

            <li data-id="1-1" data-type="1" data-event="J_storeHotBtn"></li>

        </ol>

    </div>

</body>

// 点击事件按钮
$('body').on('click', '[data-event]', function(e) {
　　var arr = $(this).data('event').match(/J_(\w+)Btn/);
　　var selector = arr[1];

　　switch (selector) {
　　　　case 'storeHot':
　　　　　　$targetElem = $targetElem.parent('li').length ? $targetElem.parent('li') : $targetElem;
　　　　　　var type = $targetElem.data('type');
　　　　　　var id = $targetElem.data('id');
　　　　　　switch (type) {
　　　　　　　　case 1:
　　　　　　　　　　self._createDialog('hot-store', '', id);
　　　　　　　　　　break;
　　　　　　　　case 2:
　　　　　　　　　　self._createDialog('hot-hb', '', id);
　　　　　　　　　　break;
　　　　　　　　case 3:
　　　　　　　　　　self._createDialog('hot-hb-simple', '', id);
　　　　　　　　　　break;
　　　　　　}

　　　　break;

　　}

});

解决办法有五种：

1、取消事件委派，将事件直接绑定在目标元素本身上；

2、将目标元素更换成默认可点击的元素，如<a>、<button>；

3、将事件委派在非document或body上；

4、将目标元素增加样式cursor:pointer；

5、将click事件换成touch事件。

方案3为最佳方案，其他三种的代价相对较大。方案1，不便于代码的管理、性能等；方案2，区块的点击无法实现（语义等方面考虑）；方案4，影响展现，会改变原有的交互体验。方案3几乎没有以上几点缺点。

二、点击闪屏

　　 ios下闪屏问题，由事件委派引发，解决方案如下：　　　　

　　　　1、去除事件委派；

　　　　2、给委派的元素加上属性

　　　　　　-webkit-tap-highlight-color: rgba(0,0,0,0);

　　　　　　-webkit-user-select: none;

　　方案2为最佳方案。

ios 点击失效、闪屏问题解决方案的更多相关文章

  1. Ubuntu14&period;04 Y460闪屏问题解决方案

    我的笔记本是联想Y460,安装了Ubuntu之后发现屏幕闪烁移位,而且在使用IDE的时候出现无法输入中文等问题,其实是显卡驱动的问题,N卡官网给的驱动不好用,尝试使用大黄蜂 参考:https://wi ...

  2. popupWindow使用timePicker时点击出现闪屏问题的解决办法

    记录一下刚解决的新鲜bug,噔噔噔噔: 首先说明,我并不知道到底是什么原理导致和解决的问题 总之就是,我在使用popupWindow时的弹出方法使用的是popupWindow.showAsDropDo ...

  3. mfc static控件 视频播放 闪屏问题 解决方案

    方案1: 我昨天刚在csdn上解决了这个问题,不是双缓冲和WS_CLIPCHILDREN还有背景擦出什么的问题,就是在你重画的时候要去掉这些控件(按钮什么的)区域, 闪屏是因为窗口大小发生改变时,由于 ...

  4. MFC框架下Opengl窗口闪屏问题解决方案

    转自https://blog.csdn.net/niusiqiang/article/details/43116153 虽然启用了双缓冲,但是仍然会出闪屏的情况,这是由于OpenGL自己有刷新背景的函 ...

  5. ios点击输入框，界面放大解决方案

    当我们编写的input宽度没有占满屏幕宽度,而且又没有申明meta,就会出现点击输入框,界面放大这个问题. 下面我直接给出解决方案: <meta name="viewport&quot ...

  6. iOS 点击按钮截屏

    @interface CaptureViewController () @property (nonatomic, strong) UIImageView *backgrounView; //控制器背 ...

  7. 解决uni-file-picker组件在ios点击失效的问题

    从组件源码里找到choose-and-upload-file.js文件,查找chooseAndUploadFile方法,在方法里添加下面代码,保存即可解决. opts.sourceType = ['a ...

  8. 移动端ios中click点击失效

    原因: Safari应该有某种机制用来节约资源,就是如果元素摸起来不像可以点的,就不给他响应事件. 所以,需要在点击的元素上加上{cursor:pointer},就解决了.当然还有别的方法,检点来说就 ...

  9. IOS客户端UIwebview下web页面闪屏问题

    基于ios客户端uiwebview下的web页面,在其内容高度大于视窗高度时,如果点击超过视窗下文档的底部按钮,收缩内容高度,会发生闪屏问题. 外因是由文档的高度大于视窗的高度所致,本质原因未知. 解 ...

随机推荐

  1. django的分页--不全也未实现

    一.Django内置分页 Paginator 二.自定义分页 分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应该在数据库表中的起始位置. 1.设定每页显示数据条数 2.用户输 ...

  2. 【niubi-job——一个分布式的任务调度框架】----FAQ文档

    引言 本文为niubi-job的FAQ文档,该文档会无限更新.如果您在这里没有找到您想要的答案,请把问题提交到这里. FAQ 1.为什么我的所有任务总是运行在同一个节点上,而没有平均分配到所有节点上? ...

  3. Mysql的函数使用方法

    今天有点临时需求要计算一张表的结果,不想写代码,想到了mysql的自定义函数.碰到了很多问题,为了方便一下使用,在此记录一下. 需求:一张表中,有比分,需要查询出比赛id和比赛结果. 分析:     ...

  4. wpf 资源的重用

    资源的利用 1) Window.Resource <Window.Resource> <ImageBrush x:Key="TitleBrush" TileMod ...

  5. thymeleaf文本处理

    文本处理 显示文本是网页开发的最基本需求,另外,国际化的程序当今也是相当必要的.这些问题,thymeleaf都可以轻松解决. th:text标签属性 这个属性的基本作用就是显示文本,它的值可以既可以从 ...

  6. C&plus;&plus;Primer学习——函数

    编译器能以任意顺序对形参进行求值 函数的返回类型不能是数组类型和函数类型. 函数开始时为形参分配内存,一旦函数结束,形参也就被销毁了. 如果弄成静态局部变量,那么回到程序终止结束时才被销毁. void ...

  7. Python-类的绑定方法与非绑定方法

    类中定义的函数分成两大类 一:绑定方法(绑定给谁,谁来调用就自动将它本身当作第一个参数传入): 绑定到类的方法:用classmethod装饰器装饰的方法. 为类量身定制 类.boud_method() ...

  8. 复习C&plus;&plus;：VS2008中的宏干嘛用的

    VS2008中有宏,可也进行编辑和设置. 好处: 1.快速生成代码,帮助开发. 2.个人定制化功能,IDE更合适自己用. 3.提升编程效率.   缺点: 使用VB开发,一开始用起来费事.不过有官方参考 ...

  9. Jmeter录制badboy

    一般自己手动的设置JMeter会比较麻烦,如果一边操作页面,提交表单,一边能够自动生成JMeter的脚本,则非常方便: BadBoy:录制JMeter脚本: Donwload URL:http://w ...

  10. C&num;基础复习（1） 之 Struct与Class的区别

    参考资料 [1] 毛星云[<Effective C#>提炼总结] https://zhuanlan.zhihu.com/p/24553860 [2] <C# 捷径教程> [3] ...

相关文章