gpt4 book ai didi

javascript - iScroll 使其他 onclick 在 iOS 上停止工作

转载 作者:行者123 更新时间:2023-11-29 02:01:14 25 4
gpt4 key购买 nike

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

最佳答案

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

关于javascript - iScroll 使其他 onclick 在 iOS 上停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30360300/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com