iScroll 让其他人 onclick 停止工作 iOS

Question

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

为了获得水平滚动，我使用了 iScroll，它做得非常好，但是在 phone.

上测试时另一个 JavaScript 失败了

另一个 JavaScript 在您单击时更改最后一张图片，"flipping" 将图片更改为另一张图片，但自从添加滚动条后就停止工作了。

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

options.tap

Set this to true to let iScroll emit a custom tapevent when the scroll area is clicked/tapped but not scrolled.

This is the suggested way to handle user interaction with clickable elements. To listen to the tap event you would add an event listener as you would do for a standard event. Example:

element.addEventListener('tap', doSomething, false); \ Native $('#element').on('tap', doSomething); \ jQuery

You can also customize the event name by passing a string. Eg:

tap: 'myCustomTapEvent'

In this case you'd listen to 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

iScroll makes others onclick stop working on iOS

html

javascript

iphone

ios

iscroll

不要认为这是有用的，但不管怎样，也许这就是问题所在：