zoukankan      html  css  js  c++  java
  • 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为最佳方案。

  • 相关阅读:
    《国富论》
    DataGridView
    《ASP.NET Core 3框架揭秘》
    看见
    英语常用词汇
    《未选择的路》
    Redis实战(20)Redis 如何从海量数据中查询出某一个 Key?
    .NET 程序集Assembly使用
    ExtJs基础知识总结:自定义弹窗和ComboBox自动联想加载(四)
    ExtJs基础知识总结:Dom、IFrame和TreePanel、TabPanel(三)
  • 原文地址:https://www.cnblogs.com/hity-tt/p/6423591.html
Copyright © 2011-2022 走看看