Question

我正在构建一个网络应用程序但是在iOS7中，jquery.touchSwipe和我的“点击”事件之间存在干扰。

网络应用程序在较旧的iOS版本上运行良好，没有阻碍。

问题是如果我将jquery.touchSwipe插件包含到我的网络应用程序中，“点击”事件就无法正常工作; “-webkit-touch-callout：none;”不会起作用意味着我的div可以选择（不是我想要的）。 jquery.touchSwipe的滑动功能可以使用。

如果我摆脱了jquery.touchSwipe插件，那么我的所有“点击”都可以正常工作

这是我的html（btn_bottom div作为例子，这是一个放在我的应用程序底部的按钮）：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Jh Portfolio | mobile</title>

  <link rel="apple-touch-icon" sizes="57x57" href="jh_logo57.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="jh_logo72.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="jh_logo114.png" />
  <link rel="apple-touch-icon" sizes="157x157" href="jh_logo157.png" />
  <!-- stylesheets -->
  <link rel="stylesheet" href="layout.css" type="text/css">
  <link rel="stylesheet" href="info/layout_info.css" type="text/css">
  <link rel="stylesheet" href="clients/layout_clients.css" type="text/css">
  <link rel="stylesheet" href="each_clients_bazar.css" type="text/css">
  <link rel="stylesheet" href="contact/layout_contact.css" type="text/css">
</head>

<body>

  <div id="...">
     <div id="..." class="...">
        <div id="..." class="..."></div>
        <div id="..."></div>
     </div>
  </div>
  <div id="..."></div>
  <div id="..."></div>
  <div id="..."></div>
  <div id="..."></div>
  <div id="..."></div>
  <div id="..."></div>

  <div id="...">
     <div id="..." class="...">
        <img src="---.gif" width="..." height="..." alt="...">
     </div>
  </div>
  <div id="...">
     <div id="..." class="..."></div>
  </div>
  <div id="...">
     <div id="..." class="...">
        <div id="...">
           <div id="..."></div>
           <div id="..."></div>
           <div id="..."></div>
           <div id="..."></div>
           <div id="...">
              <div id="..." class="..."></div>
              <div id="..." class="..."></div>
              <div id="..." class="..."></div>
              <div id="..." class="..."></div>
           </div>
        </div>
     </div>
  </div>

  <div id="...">
     <div id="..." class="...">
        <div id="...">
           <div id="..."></div>
           <div id="..."></div>
           <div id="..."></div>
           <div id="..."></div>
           <div id="...">
              <div id="..." class="..."></div>
              <div id="..." class="..."></div>
              <div id="..." class="..."></div>
              <div id="..." class="..."></div>
           </div>
        </div>
     </div>
  </div>

  <div id="...">
     <div id="..." class="...">
        <div id="..."></div>
        <div id="..."></div>
        <div id="..." class="..."></div>
        <div id="..." class="..."></div>
     </div>
  </div>

  <div id="...">
     <div id="...">
        <div id="..."></div>
        <div id="..."></div>
     </div>
  </div>

  <div id="btn_bottom"></div>
  <div id="..."></div>
  <div id="..."></div>
  <div id="..."></div>
  <div id="..."></div>

<script src="preloader.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>
<script type="text/javascript" src="iscroll.js"></script>
<script src="jquery.touchSwipe.min.js" type="text/javascript"></script>
<script src="jhmobile.js" type="text/javascript"></script>
<!-- This is for a canvas animation-->
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="clients/esb/esb_728x90.js"></script>
</body>
</html>

这是该按钮的CSS（“div id =”btn_bottom“）：

#btn_bottom {
   margin: auto;
   position: relative;
   margin-top: -191px;
   height: 191px;
   width: 229px;
   clear:both;
   opacity:1;
   z-index:101;
   -webkit-touch-callout: none;
   -ms-touch-action: none;
   cursor: pointer;
}

事实：

我的.html被W3C成功检查为HTML5。
我使用最新的Jquery以及jquery.touchSwipe。
jquery.touchSwipe刷卡很棒。
所有桌面浏览器以及旧iOS都能正常运行（“刷卡”和“按钮”）。

如果我将touchSwipe插件与其他脚本（在iOS7下）结合使用，我想知道是否有人知道为什么按钮不可点击。

谢谢你们。

Answer 1

如果有人遇到同样的问题，我只想说我找到的最佳解决方案是切换到touchWipe插件而不是touchswipe。

touchWipe唯一的不便之处在于它无法在桌面浏览器上运行，但由于我打算将此效果用于移动设备，因此它非常完美。

iOS7 - jquery.touchSwipe干扰点击和webkit-touch-callout

1 个答案: