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或:不会应用焦点; 但它会在javascript中触发事件

.hover() or .click()

如果可能,任何想法如何解决这个问题？

Answer 1

您只需要在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();
}
});

Answer 2

  // 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 ...花了一整天调试并实现所有建议的解决方案无济于事...

Answer 3

作者评论说表单兼容性很不好 - 这是一个已知的问题,他正在为下一个版本修复.其他人在论坛中发表评论:

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

链接应该没问题,并在提供的演示中工作.您已经e.preventDefault()在init脚本中注释掉了调用,这是通常的罪魁祸首.也许表单兼容性问题也会影响链接？

至于悬停事件,我可以告诉你,当点击一个元素时应该激活它.

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