一、点击失效

描述:将点击事件(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.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" ...

  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. centos7 安装SSH

    1.安装OpenSSH服务(CentOS系统默认安装了openssh)      yum install openssh-server -y 2.配置OpenSSH服务(默认的配置已可以正常工作) O ...

  2. testNG的高级用法 --DataProvider

    @DataProvider Method参数 数据提供者的第一个参数是java.lang.reflect.Method,TestNG传递这个将调用的测试方法.如果您希望数据提供者根据不同的测试方法返回 ...

  3. 接口和抽象类的使用场景以及多类继承存在的问题(c#)

    我们首先来看下抽象class能发挥优势的使用场景. 假设有一个Cars基类,具体型号的Car继承该基类,并实现自己独有的属性或方法. public class Cars { public string ...

  4. pod-infrastructure:latest镜像下载失败

    报错一:image pull failed for registry.access.redhat.com/rhel7/pod-infrastructure:latest, this may be be ...

  5. DOS磁盘操作类命令

    外部命令 formAT---磁盘格式化命令  格式:formAT<盘符:>[/S][4][/Q] 1)命令收的盘符不可缺省,若对硬盘进行格式化,则会有如下提示:WARNING:ALL DA ...

  6. Java中的内部类(二)成员内部类

    Java中的成员内部类(实例内部类):相当于类中的一个成员变量,下面通过一个例子来观察成员内部类的特点 public class Outer { //定义一个实例变量和一个静态变量 private i ...

  7. Java Web 学习与总结(三)会话跟踪

    何为会话跟踪?举个简单的例子,比如登陆到某购物网站后,在一定时间内无论你在这个网站中切换到任意的网页,只要不执行退出操作,一直保持着你账号的登录状态. 那么在Java Web中我们应当如何去实现这一操 ...

  8. Elasticsearch基础知识

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口Elasticsearch是用Java开发的,并作为Apache ...

  9. css 做幻灯片效果

     设置一个div 盒子 <div class="ani"></div> 设置css 样式 .ani{ width:480px; height:320px; ...

  10. [Swift实际操作]八、实用进阶-(3)闭包在定时任务、动画和线程中的使用实际操作

    闭包的使用相当广泛,它是可以在代码中被传递和引用的具有独立功能的模块.双击打开之前创建的空白项目.本文将演示闭包在定时任务.动画和线程中的使用.在左侧的项目导航区,打开视图控制器的代码文件:ViewC ...