javascript iScroll 不会让项目被点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8345644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iScroll won't let items be clicked
提问by Toni Michel Caubet
I am using iScroll4and it's working great!
我正在使用iScroll4，它运行良好！
This are the functions I use to init, refresh and end iScroll:
这是我用来初始化、刷新和结束 iScroll 的函数：
function iniciarIscroll(){
/*En ie7 no lo usamos*/
if(!ie7){
$(document).ready(function() {
myScroll1 = new iScroll('nvl1');
myScroll2 =new iScroll('nvl2');
/*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);*/
});
}
return false;
}
function refrescarIscroll(){
if(!ie7){
myScroll1.refresh();
myScroll2.refresh();
}
return false;
}
function terminarIscroll(){
if(!ie7){
myScroll1.destroy();
myScroll1 = null;
myScroll2.destroy();
myScroll2 = null;
}
return false;
}
The problem is it won't let <a>or <input>or anything to be clicked (or focused, I am not sure); also css :hover or :focus won't be applied; but it would fire events in javascript like
问题是它不会让<a>或<input>或任何东西被点击（或聚焦，我不确定）；css :hover 或 :focus 也不会被应用；但它会在 javascript 中触发事件，例如
.hover() or .click()
Any idea how to solve this if possible?
如果可能的话，知道如何解决这个问题吗？
采纳答案by Tak
The author has commented that form compatibility is glitchy - it's a known issue and he's working on a fix for the next version. Someone else has commented in the forums:
作者评论说表单兼容性有问题——这是一个已知问题，他正在为下一个版本进行修复。论坛里还有人评论说：
As of v4.1.9, support for form fields is still under development. You can make radio buttons and checkboxes work by wrapping in a label (wrapping seems to work better possibly than using for="" syntax).
从 v4.1.9 开始，对表单字段的支持仍在开发中。您可以通过包装在标签中来使单选按钮和复选框工作（包装似乎比使用 for="" 语法更好用）。
Links should be fine and work in the demos provided. You've commented out the e.preventDefault()call in your init script which is the usual culprit. Maybe the form compatibility issue is affecting links also?
链接应该没问题并且可以在提供的演示中使用。您已注释掉e.preventDefault()init 脚本中的调用，这是通常的罪魁祸首。也许表单兼容性问题也会影响链接？
As for the hover event, from what I can tell this should be activated when an element is tapped.
至于悬停事件，据我所知，应该在点击元素时激活它。
Hope that helps a little. Worst case scenario - scrap your code and start with a demo page from the project, adapt to your needs one line at a time and keep testing it. You'll soon know which modification breaks the intended behaviour.
希望能有所帮助。最坏的情况 - 废弃您的代码并从项目中的演示页面开始，一次一行地适应您的需求并继续对其进行测试。您很快就会知道哪些修改会破坏预期的行为。
回答by yenssen
You just need to make this changes in the loader of the iscroll:
您只需要在 iscroll 的加载程序中进行此更改：
Change this line:
改变这一行：
myScroll = new iScroll('wrapper');
For this:
为了这：
myScroll = new iScroll('wrapper', {
useTransform: true,
zoom: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
回答by Zennichimaro
// Setup myScroll
myScroll = new IScroll('#wrapper', {
scrollX: horizontalSwipe,
scrollY: !horizontalSwipe,
momentum: false,
snap: document.querySelectorAll('#scroller .slide'),
snapSpeed: 400,
bounceEasing: 'back',
keyBindings: true,
click: true
});
For me, I just need to add click: true on the last line... Spent the whole day debugging and implementing all the suggested solutions to no avail...
对我来说，我只需要在最后一行添加 click: true ......花了一整天的时间调试并实施所有建议的解决方案无济于事......
回答by Ben L
One work around I've used is to "freeze" the iscroll when I want the user to be able to make edits. The incompatibility that iScroll has with inputs is related as far as I can tell to the css transformations in combination with the touch support it applies to the content in the scroller. If you temporarily disable the scroller, you can allow the user to enter in values. The trick is to make sure the current scroll location of the content is preserved on disabling. When "frozen" a user can update the inputs within the visible area. The downside is that the scroller won't scroll during this state. You'll have to thaw it on some event.
我使用的一种解决方法是在我希望用户能够进行编辑时“冻结”iscroll。据我所知，iScroll 与输入的不兼容与 css 转换以及它应用于滚动条中的内容的触摸支持有关。如果暂时禁用滚动条，则可以允许用户输入值。诀窍是确保在禁用时保留内容的当前滚动位置。当“冻结”时，用户可以更新可见区域内的输入。缺点是滚动条在此状态下不会滚动。你必须在某些活动中解冻它。
I added these functions to the iScroll.prototype to make this work:
我将这些函数添加到 iScroll.prototype 以使其工作：
_get_current_scroll_px: function (transformStyle) {
//return the first string that looks like an integer, that should be the x translation
return /[\-0-9]+px/.exec(transformStyle)[0];
},
freeze: function () {
this.disable();
this.savedStyle = this.scroller.style[vendor + 'Transform'];
this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller
this.scroller.style[vendor + 'Transform'] = '';
},
thaw: function () {
this.scroller.style[vendor + 'Transform'] = this.savedStyle;
this.scroller.style['marginLeft'] = '0';
this.enable();
}
Calling or freezing it would look like:
调用或冻结它看起来像：
//user triggered event causes freeze
yourFreezeEventCallback: function () {
myScroll1.freeze();
//now user can use visible inputs on screen
}
Thawing it would look like:
解冻它看起来像：
//user triggered event causes thaw
yourThawEventCallback: function () {
myScroll1.thaw();
//now scrolling is back and inputs can no longer be edited or in focus
}
Obviously, you'll need to integrate this in to your own project somehow but it has worked for me. It isn't ideal so I'm looking forward to the iScroll update. Warning: this isn't tested in IE so I won't vouch for it there. I hope this is at least a start to help you get to a work around.
显然，您需要以某种方式将其集成到您自己的项目中，但它对我有用。这并不理想，所以我很期待 iScroll 更新。警告：这不是在 IE 中测试的，所以我不会在那里担保。我希望这至少是帮助您解决问题的开始。
回答by psema4
When I first discovered iScroll, I thought it was the solution to many of my problems. Then this issue bit me big time. While trying to find a workaround, I came up with this pull request.
当我第一次发现 iScroll 时，我认为它可以解决我的许多问题。然后这个问题让我大吃一惊。在试图找到解决方法时，我想出了这个 pull request。
There is a note on the pull request that another, better, solution has been found though I'm not sure which pull request is/was supposed to fix the issue. I'll see if I can get more detailed info from the author of that note.
关于拉取请求有一个说明，虽然我不确定哪个拉取请求是/应该解决这个问题，但已经找到了另一个更好的解决方案。我会看看我是否可以从该笔记的作者那里获得更详细的信息。
Update: The relevant pull request can be found here. I haven't had a chance to test it yet (I hope to confirm Android support later today.)
更新：可以在此处找到相关的拉取请求。我还没有机会测试它（我希望今天晚些时候确认 Android 支持。）
回答by hackartist
I also have been working on making things scroll smoothly in the mobile environment and iscroll was one of the libraries I considered in my search for the right tool. Other answers have suggested how you can fix your specific problem but I would actually suggest using either scrollability(by Joe Hewitt) or touchscroll(by David Aurelio). I think that scrollability actually offers the best feel but it isn't really done and you would end up facing the same or similar issues. I am personally using touchscroll for a project of mine and I recommend it.
我还一直致力于使移动环境中的内容平滑滚动，而 iscroll 是我在寻找合适工具时考虑的库之一。其他答案建议您如何解决您的特定问题，但我实际上建议使用可滚动性（由 Joe Hewitt）或touchscroll（由 David Aurelio）。我认为可滚动性实际上提供了最好的感觉，但它并没有真正完成，您最终会面临相同或类似的问题。我个人在我的一个项目中使用 touchscroll，我推荐它。
I had to put in custom clicking actions and timeout checking when I was experimenting with iscroll a few weeks ago in my project and I did so by commenting out the e.preventDefault() on the start of the touch and inserting some of my own functions to catch when it actually scrolls. At their heart these libraries all work the same way (catching events and preventing them, running css transforms to make smoother than DOM-redrawing animations, then artificially firing any events that should be fired). This means the other way you can fix it is to find when the event of the click for your specific elements should happen and fire it manually in the code. In touchscroll it listens for events on the uppermost element so you can overwrite behavior by simply stopping bubbling... I can't remember if iscroll does the same.
几周前我在我的项目中尝试使用 iscroll 时，我不得不进行自定义点击操作和超时检查，我通过在触摸开始时注释掉 e.preventDefault() 并插入一些我自己的函数来做到这一点在它实际滚动时捕捉。从本质上讲，这些库都以相同的方式工作（捕获事件并阻止它们，运行 css 转换以使其比 DOM 重绘动画更流畅，然后人为地触发任何应该触发的事件）。这意味着您可以修复它的另一种方法是查找特定元素的单击事件何时应该发生并在代码中手动触发它。在 touchscroll 中，它侦听最上面元素的事件，因此您可以通过简单地停止冒泡来覆盖行为......我不记得 iscroll 是否也这样做。
This (smooth, native feeling, animation in mobile) is still an area which is at the edge of the various technologies so no one has the complete solution yet. I would expect in a few years, mobile improve so that mobile browsers just handle scroll events natively anyway but until then we are forced to hack together solutions like these. Good luck!
这（流畅、原生的感觉、移动动画）仍然是一个处于各种技术边缘的领域，所以还没有人有完整的解决方案。我预计在几年内，移动设备会有所改进，以便移动浏览器无论如何只能在本机处理滚动事件，但在那之前我们被迫将这些解决方案组合在一起。祝你好运！
回答by Anatoliy Shuba
Android browser bug is result of very old version of WebKit inside Android, even inside Android 4.3. The root cause of bug - wrong processing of the click event that iScroll sends back to the browser (removing preventDefault just stops sending this click event) The Android Chrome browser is free from this bug because it has upgraded WebKit library inside.
Android 浏览器错误是 Android 中非常旧版本的 WebKit 的结果，即使在 Android 4.3 中也是如此。bug的根本原因——错误处理iScroll发送回浏览器的点击事件（去掉preventDefault只是停止发送这个点击事件）Android Chrome浏览器没有这个bug，因为它内部升级了WebKit库。
Waiting for Android WebKit upgrade from Google.
等待 Google 的 Android WebKit 升级。
回答by icarus2n
comment out
注释掉
position:absolute;
at #pageWrapperin styles.css
在#pageWrapper中styles.css
In my case, this solved the above unclickable issue.
就我而言，这解决了上述无法点击的问题。
回答by sugar
Try this
试试这个
myScroll = new IScroll('#wrapper', { click: true });
