Question

我正在为我的iPhone 5s开发一个基于HTML的应用程序，这个应用程序基本上是一个3个图像旁边的应用程序（其中只有一个可见，但下一个使用滑动手势等显示）。

为了获得水平滚动，我使用了iScroll来完成这项工作非常好，但是在手机上测试时又使另一个JavaScript失败。

当你点击它时，另一个JavaScript正在改变最后一张图片，将图片“翻转”到另一张图片，但是自从添加了滚动条后停止工作。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<meta name="apple-mobile-web-app-capable" content="yes" />

<script language="javascript">
function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "https://www.imageupload.co.uk/images/2015/05/20/FABIANISELLf9adc.jpg") 
    {
        document.getElementById("imgClickAndChange").src = "https://www.imageupload.co.uk/images/2015/05/20/studentkortbak.jpg";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "https://www.imageupload.co.uk/images/2015/05/20/FABIANISELLf9adc.jpg";
    }
}

不要以为这是用的，但无论如何，也许这是问题：

<script> function BlockMove(event) {
 //Makes the website act like a app, NOSCROLL
  event.preventDefault() ;
 }

可能最有趣的代码：

<div id="wrapper">
<div id="scroller">
    <ul>
        <li><img alt="" src="first.png" style="width: 320px;" /></li>
        <li><img alt="" src="second.png" style="width: 320px;"/></li>
        <li><p>
    <img alt="" src="another.jpg" 
        style="width: 320px; margin-top: 3px;" id="imgClickAndChange" onclick="changeImage()"  />
</p></li>
</ul>
</div>

Answer 1

我会尝试在iScroll中启用tap选项，并将当前的click事件绑定到该选项。您可以通过在iScroll构造函数的第二个参数中添加选项来启用点击，如下所示：var scroller = new IScroll('#wrapper', { tap: true });然后，您可以像任何其他事件一样绑定到点击事件。从iScroll文档：

options.tap

将此项设置为true，以便在单击/点击滚动区域但不滚动时让iScroll发出自定义tapevent。

这是处理用户与可点击元素交互的建议方法。要收听tap事件，您将像标准事件一样添加事件侦听器。例如：

element.addEventListener（'tap'，doSomething，false）; \ Native $（'＃element'）。on（'tap'，doSomething）; \ jQuery

您还可以通过传递字符串来自定义事件名称。例如：

点按：'myCustomTapEvent'

在这种情况下，你会听myCustomTapEvent。

http://iscrolljs.com/

因此，在实践中，您的HTML页面将类似于：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script> <!-- set to correct path to your JS file-->

</head>

<body onload="init()">
  <div id="wrapper">
    <div id="scroller">
      <ul>
        <li>
          <img alt="" src="https://www.google.co.uk/images/srpr/logo11w.png" style="width: 320px;" />
        </li>
        <li>
          <img alt="" src="https://www.google.co.uk/images/srpr/logo11w.png" style="width: 320px;" />
        </li>
        <li>
          <p>
            <img alt="" src="https://www.google.co.uk/images/srpr/logo11w.png" style="width: 320px; margin-top: 3px;" id="imgClickAndChange" />
          </p>
        </li>

      </ul>
    </div>
  </div>
</body>

</html>

然后在你的javascript文件中：

  function changeImage() {
    if (document.getElementById("imgClickAndChange").src == "image1.jpg") {
        document.getElementById("imgClickAndChange").src = "image2.jpg";
    } else {
        document.getElementById("imgClickAndChange").src = "image1.jpg";
    }
}

function init(){
    //Do iScroll constructor with tap: true

    document.getElementById("imgClickAndChange").addEventListener('tap', changeImage);
}

iScroll使其他人onclick停止在iOS

不要以为这是用的，但无论如何，也许这是问题：

1 个答案: