iScroll 4，把禁掉的:active样式还给我~

iScroll这个移动端的滚动神器大家都非常熟悉了，直到现在仍是实现移动端Web滚动的首选方案之一。。。

当我接触移动端Web时iScroll已经有两个版本了，iScroll 4和iScroll 5，当时看到很多文章都是关于iScroll 4的，看来这个版本已经得到的非常广泛的应用，而iScroll 5的文章相对非常之少，好吧，项目进度耽误不起，我们就选当前最流行的这个版本吧（iScroll 4.2.5），想必也是最成熟稳定的。。。

iScroll 4的官网地址：

http://cubiq.org/iscroll-4

这个插件的功能全面，使用也简单，应对表面统一的移动浏览器平台（我们只关注webkit核心~~ ^_^）感觉游刃有余，对于性能问题，使用初期也察觉到有什么异样（看来常年停留在安卓2.3系统的我根本不知道顺滑与卡顿的区别~~），心里还在莫莫崇拜国外牛人多啊~~

直到项目进入后期完善阶段了，就会到处点一点，按一按，检查下前端工作是否有重大Bug，突然间意识到有些页面表现怪怪的，一些Button点击时少了一点什么效果，原来是在点击按钮时没有表现出交互效果！

查看下CSS代码，明明我在.btn类上加了:active效果了的，而且在应用iScroll滚动的区域外的button是有效果的（我是用桌面Chrome模拟器的），那问题一定是出在iScroll身上了。。。其实这个问题也可以理解，在很多类似的模拟插件中如果不禁用掉系统默认事件或者效果的话，达不到完美的用户体验效果，印象中桌面端的那个mousewheel插件就是如此。。。

那我就看API，找度娘~~原来很早有很多人已经遇到这样的问题了，比如园里的Tony同学（http://www.cnblogs.com/lostyu/p/3907256.html）哈哈，有人进过坑，就意识着有人成功跳出过坑~~直接把解决方法拿来用是我们前端城狮的必要技术之一，于是我也复制之~~ ^o^

iScroll作者当时一刀砍啊，所有默认行为全部干掉了：

onBeforeScrollStart: function (e) { e.preventDefault(); }

大家的解决方法：

onBeforeScrollStart: function (e) {
    var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : ( e.target ? e.target.nodeName.toLowerCase() : '' );
    if( nodeType != 'select'&& nodeType != 'option' && nodeType != 'input' && nodeType != 'textarea' )  e.preventDefault();
}

这个方法很直接，很有效，将最为常用的系统组件select、option、input、textarea等等在iScroll中点击无效的问题解决了；

但是如果我们想让Button也能点击且有点击效果的话，就要手动再加  && nodeType != 'button'  到代码里去，也行吧~~~

但是如果我们想让<a class="btn">也有点击效果~~~，就要进一步改造啦。

对了，不是有iScroll 5了吗，它会不会有这个问题呢？看一下API， 新版本已经有相关的控制参数了： options.preventDefaultException

iScroll 5官网API： 

http://iscrolljs.com/#advanced-options

要不直接换iScroll 5? 了解过iScroll 5的同学要先呵呵一下，因为iScroll 5已经不是4+1=5那么简单了。

iScroll 5已经完全重写了，不少接口都做了改变，就连实例化的方式都不同了，这么说吧，iScroll 4与5完全是两个东西，你甚至可以在同一个页面中同时使用它们俩：

iScroll 4使用：

new iScroll('scroll-wrapper-1');

iScroll 5使用：

new IScroll('#scroll-wrapper-2');

iScroll 5提供的那个配置接口参数可以解决我们之前遇到的问题：

new IScroll('#pro-detail',{
           preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/, className: /(^|\s)btn(\s|$)/ }
        });

看到  className: /(^|\s)btn(\s|$)/  了吗？ 这样就可以使.btn的元素不被preventDefault()方法干扰。

由于换用iScroll5的劳动成本略大于对iScroll4的改进（其实是不改心里有点难受，我不是处女座），我们开始改动工~

我们学习iScroll 5的样子，为iScroll 4也添加配置参数（大概在107行）：

 // Default options
        that.options = {
            hScroll: true,
            vScroll: true,
            x: 0,
            y: 0,
            bounce: true,
            bounceLock: false,
            momentum: true,
            lockDirection: true,
            useTransform: true,
            useTransition: false,
            topOffset: 0,
            checkDOMChanges: false,     // Experimental
            handleClick: true,
            preventDefaultException: "", // ex: "A|BUTTON|.btn-class|#btn-id"

                。。。

然后将那个onBeforeScrollStart方法在同学们改造过的基础之上变得更丰满，如下：

onBeforeScrollStart: function (e) {
                var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : '');
                var excpt = that.options.preventDefaultException.replace(/\s/g, ""), excptArr = null, targetNode = null;
                if (nodeType != 'select' && nodeType != 'option' && nodeType != 'input' && nodeType != 'textarea' && !isExcptNode(e.target, excpt)) {
                    e.preventDefault();
                }

                function isExcptNode(_node, _excptStr) {
                    var result = false;
                    if (_excptStr) {
                        targetNode = _node;
                        excpt += _excptStr.match("|") ? "" : "|";
                        excptArr = excpt.split("|");
                        for (i in excptArr) {
                            if (targetNode.nodeName.toString().toLowerCase() == excptArr[i].toLowerCase()) {
                                result = true;
                                break;
                            }
                            else if (excptArr[i].match("#")) {
                                if (targetNode.id.match(excptArr[i].replace("#", ""))) {
                                    result = true;
                                    break;
                                }
                            }
                            else if (excptArr[i].match(".")) {
                                if (targetNode.className.match(excptArr[i].replace(".", ""))) {
                                    result = true;
                                    break;
                                }
                            }
                        }
                    }
                    return result;
                }

            }

于是，我们也可以在使用iScroll4时这样啦：

new iScroll('wrapper', {
            useTransition: false,
            vScrollbar: false,
            preventDefaultException:".btn|.btn-b|#btn-submit"
        });