ios 点击失效、闪屏问题解决方案
一、点击失效
描述:将点击事件(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 点击失效、闪屏问题解决方案的更多相关文章
- Ubuntu14.04 Y460闪屏问题解决方案
我的笔记本是联想Y460,安装了Ubuntu之后发现屏幕闪烁移位,而且在使用IDE的时候出现无法输入中文等问题,其实是显卡驱动的问题,N卡官网给的驱动不好用,尝试使用大黄蜂 参考:https://wi ...
- popupWindow使用timePicker时点击出现闪屏问题的解决办法
记录一下刚解决的新鲜bug,噔噔噔噔: 首先说明,我并不知道到底是什么原理导致和解决的问题 总之就是,我在使用popupWindow时的弹出方法使用的是popupWindow.showAsDropDo ...
- mfc static控件 视频播放 闪屏问题 解决方案
方案1: 我昨天刚在csdn上解决了这个问题,不是双缓冲和WS_CLIPCHILDREN还有背景擦出什么的问题,就是在你重画的时候要去掉这些控件(按钮什么的)区域, 闪屏是因为窗口大小发生改变时,由于 ...
- MFC框架下Opengl窗口闪屏问题解决方案
转自https://blog.csdn.net/niusiqiang/article/details/43116153 虽然启用了双缓冲,但是仍然会出闪屏的情况,这是由于OpenGL自己有刷新背景的函 ...
- ios点击输入框,界面放大解决方案
当我们编写的input宽度没有占满屏幕宽度,而且又没有申明meta,就会出现点击输入框,界面放大这个问题. 下面我直接给出解决方案: <meta name="viewport" ...
- iOS 点击按钮截屏
@interface CaptureViewController () @property (nonatomic, strong) UIImageView *backgrounView; //控制器背 ...
- 解决uni-file-picker组件在ios点击失效的问题
从组件源码里找到choose-and-upload-file.js文件,查找chooseAndUploadFile方法,在方法里添加下面代码,保存即可解决. opts.sourceType = ['a ...
- 移动端ios中click点击失效
原因: Safari应该有某种机制用来节约资源,就是如果元素摸起来不像可以点的,就不给他响应事件. 所以,需要在点击的元素上加上{cursor:pointer},就解决了.当然还有别的方法,检点来说就 ...
- IOS客户端UIwebview下web页面闪屏问题
基于ios客户端uiwebview下的web页面,在其内容高度大于视窗高度时,如果点击超过视窗下文档的底部按钮,收缩内容高度,会发生闪屏问题. 外因是由文档的高度大于视窗的高度所致,本质原因未知. 解 ...
随机推荐
- 操作XDocument讲解
1.首先建立好XML .可以通选自定义EXCEL导出XML格式的数据:(如图) 2 读取XML 文件 具体的详细讲解 可以查看 改网址 :https://blog.csdn.net/dyllove98 ...
- 企业IT架构转型之道 读书笔记-1.阿里巴巴集团中台战略引发的思考
前言 1.为什么选择看这本书 2.Supercell公司的开发模式 3.“烟囱式”系统建设模式弊端,及产生这种现象的原因 4.IT人员在企业信息中心的组织职能 一.为什么选择看这本书 多日没有更新博客 ...
- kubectl get componentstatus ERROR:HTTP probe failed with statuscode: 503
通过kubectl命令可以查看k8s各组件的状态: [root@wecloud-test-k8s-1 ~]# kubectl get cs NAME STATUS MESSAGE ERROR cont ...
- Python脱产8期 Day15 2019/4/30
一 生成器send方法 1.send的工作原理# 1.send发生信息给当前停止的yield# 2.再去调用__next__()方法,生成器接着往下指向,返回下一个yield值并停止 2.例: per ...
- Java容器中的元素输出
1.容器不同于数组,容器若是想输出全部元素,可以直接利用System.out.println(collection) public class TestCollectionArrayPrint { p ...
- “全栈2019”Java多线程第三章:创建多线程之实现Runnable接口
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- VS 2010 LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
终极解决方案:VS2010在经历一些更新后,建立Win32 Console Project时会出“error LNK1123” 错误,解决方案为将 项目|项目属性|配置属性|清单工具|输入和输出|嵌入 ...
- SAE实践——用SVN命令行同步/提交代码
1. 同步应用到本地 注:首次使用svn需要输入安全认证密码 在终端输入以下命令 svn co https://svn.sinaapp.com/nyhello nyhello替换为自己的应用名称. 用 ...
- [原创]Laravel 的缓存源码解析
目录 前言 使用 源码 Cache Facade CacheManager Repository Store 前言 Laravel 支持多种缓存系统, 并提供了统一的api接口. (Laravel 5 ...
- javascript如何阻止事件冒泡和默认行为
阻止冒泡: 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo ...