javascript - iScroll 不会让项目被点击

Question

我正在使用iScroll4，它工作得很好！

这是我用来初始化、刷新和结束 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;
}

问题是它不会让<a>或<input>或任何东西被点击（或聚焦，我不确定）；也不会应用 css :hover 或 :focus ；但它会在 javascript 中触发事件，例如

.hover() or .click()

如果可能的话，知道如何解决这个问题吗？

score 20 · Accepted Answer

您只需要在 iscroll 的加载器中进行此更改：

更改此行：

myScroll = new iScroll('wrapper');

为了这：

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();
}
});

score 12 · Accepted Answer

  // 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
  });

对我来说，我只需要在最后一行添加 click: true ......花了一整天的时间调试和实施所有建议的解决方案无济于事......

score 10 · Accepted Answer

作者评论说表单兼容性有问题 - 这是一个已知问题，他正在努力修复下一个版本。论坛里还有人评论：

从 v4.1.9 开始，对表单字段的支持仍在开发中。您可以通过包装在标签中来使单选按钮和复选框起作用（包装似乎比使用 for="" 语法更好）。

链接应该没问题，并且可以在提供的演示中使用。你已经在你的初始化脚本中注释掉了e.preventDefault()这个通常的罪魁祸首。也许表单兼容性问题也会影响链接？

至于悬停事件，据我所知，当点击元素时应该激活它。

希望能有所帮助。最坏的情况 - 废弃您的代码并从项目的演示页面开始，一次适应您的需求并继续测试它。您很快就会知道哪些修改会破坏预期的行为。

score 2 · Accepted Answer

我使用的一种解决方法是在我希望用户能够进行编辑时“冻结”iscroll。据我所知，iScroll 与输入的不兼容性与 css 转换以及它应用于滚动条内容的触摸支持有关。如果您暂时禁用滚动条，您可以允许用户输入值。诀窍是确保在禁用时保留内容的当前滚动位置。当“冻结”时，用户可以更新可见区域内的输入。缺点是滚动条在此状态下不会滚动。你必须在某些事件中解冻它。

我将这些函数添加到 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();
}

调用或冻结它看起来像：

//user triggered event causes freeze
yourFreezeEventCallback: function () { 
    myScroll1.freeze();
    //now user can use visible inputs on screen
}

解冻它看起来像：

//user triggered event causes thaw
yourThawEventCallback: function () { 
    myScroll1.thaw();
    //now scrolling is back and inputs can no longer be edited or in focus
}

显然，您需要以某种方式将其集成到您自己的项目中，但它对我有用。这并不理想，所以我期待 iScroll 更新。警告：这没有在 IE 中测试，所以我不会在那里保证它。我希望这至少是一个帮助您解决问题的开始。

score 2 · Accepted Answer

当我第一次发现 iScroll 时，我认为它可以解决我的许多问题。然后这个问题让我大吃一惊。在尝试寻找解决方法时，我想出了这个 pull request。

拉取请求上有一个注释，虽然我不确定哪个拉取请求是/应该解决问题，但已经找到了另一个更好的解决方案。我会看看我是否可以从该笔记的作者那里获得更详细的信息。

更新：相关的拉取请求可以在这里找到。我还没有机会测试它（我希望今天晚些时候确认对 Android 的支持。）

score 0 · Accepted Answer

我也一直致力于让移动环境中的东西平滑滚动，iscroll 是我在寻找合适工具时考虑的库之一。其他答案建议您如何解决您的特定问题，但我实际上建议使用可滚动性（由 Joe Hewitt 编写）或touchscroll（由 David Aurelio 编写）。我认为可滚动性实际上提供了最好的感觉，但它并没有真正完成，你最终会面临相同或类似的问题。我个人在我的一个项目中使用触摸滚动，我推荐它。

几周前，当我在我的项目中尝试使用 iscroll 时，我不得不进行自定义单击操作和超时检查，我这样做是通过在触摸开始时注释掉 e.preventDefault() 并插入一些我自己的功能捕捉它实际滚动的时间。从本质上讲，这些库都以相同的方式工作（捕获事件并阻止它们，运行 css 转换以使动画比 DOM 重绘动画更平滑，然后人为地触发任何应该触发的事件）。这意味着您可以修复它的另一种方法是查找特定元素的点击事件何时发生并在代码中手动触发它。在 touchscroll 中，它侦听最上面元素上的事件，因此您可以通过简单地停止冒泡来覆盖行为......我不记得 iscroll 是否也这样做。

这（流畅的、原生的感觉、移动设备中的动画）仍然是处于各种技术边缘的领域，因此还没有完整的解决方案。我预计在几年内，移动设备会有所改进，因此移动浏览器无论如何都只能原生处理滚动事件，但在那之前，我们不得不将这些解决方案组合在一起。祝你好运！

score 0 · Accepted Answer

Android 浏览器错误是 Android 内部非常旧版本的 WebKit 的结果，即使在 Android 4.3 内部也是如此。错误的根本原因 - iScroll 发送回浏览器的单击事件处理错误（删除 preventDefault 只是停止发送此单击事件） Android Chrome 浏览器没有此错误，因为它已经升级了内部的 WebKit 库。

等待 Google 的 Android WebKit 升级。

score 0 · Accepted Answer

注释掉

position:absolute;

在#pageWrapper_styles.css

就我而言，这解决了上述不可点击的问题。

score 0 · Accepted Answer

0

试试这个

myScroll = new IScroll('#wrapper', { click: true });

于 2016-09-02T09:30:50.403 回答

javascript - iScroll 不会让项目被点击

9 回答 9

Related

Reference