iScroll 让其他人 onclick 停止在 iOS 上工作答案

【问题标题】：iScroll makes others onclick stop working on iOSiScroll 让其他人 onclick 停止在 iOS 上工作
【发布时间】：2015-05-21 16:35:51
【问题描述】：

我正在为我的 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>

【问题讨论】：

标签： javascript html ios iphone iscroll

【解决方案1】：

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

options.tap

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

这是处理用户与可点击元素交互的建议方法。要监听点击事件，您将添加一个事件监听器，就像对标准事件所做的那样。示例：

element.addEventListener('tap', doSomething, false); \ 原生 $('#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);
}

【讨论】：

非常感谢！由于我对此很陌生并且自学，我真的不知道如何“绑定到点击事件”老实说......我能找到的唯一地方适合它的地方是第二个代码（我原始帖子中的第二个代码框）。对不起，但我应该把它放在哪里？谢谢...！
您可以在 HTML 中的 body 标记中添加 onload 属性。这将具有要调用的函数的值，该函数将依次执行事件绑定。该函数最好驻留在单独的 JavaScript 文件中，但也可以是页面上的脚本标记（最好是 JavaScript 文件）
这是我目前使用的“点击”代码：真的不知道如何将“点击”事件连接到这个......对不起，我缺乏知识。 jsfiddle.net/d1eok0dp/2
我无法在 jsFiddle 中传达我想要传达的内容，但我已经用 HTML 和 js 更新了我的答案
现在可以使用了！！！非常感谢你的帮助。是时候了解更多关于我显然不太擅长的“事件”了。谢谢！！！