PhoneGap/Cordova学习笔记--5.添加事件处理

上一篇中，我们用HTML5创建了一个基本布局页面，本篇将对页面添加一些事件处理

• 引入IScroll.js

  • 上一遍创建的布局中，当我们滑动页面，会发生标题栏和状态栏也会跟着滑上去，为解决这一问题，我们引入IScroll.js文件
    

  • 浏览器打开iscrolljs.com → Download，我们移动端需要的是iscroll-lite.js文件，放进assets/www/js目录下，并在index.html中引用。

    

• 使用IScroll.js

  • 在index.html的列表div中添加ID

        <!-- 文件列表-->        <div class="list" id="scroll-list">

• iscroll的使用要求对应的属性position为absolute;overflow为hidden;在CSS文件中编辑我们的list div

    .content .list{        position: absolute;        left: 0;        top: 1.5rem;        right: 0;        bottom:0;        background-color: #ffffff;        overflow: hidden;    }

• 在index.js文件中初始化

    $(function() {        var size = $(window).width()/18;        $("html").css("font-size", size);        var scroll_list=new IScroll("#scroll-list");        });

现在执行项目就不会出现问题了，像Android中的ListView 

• 添加Item点击事件，点击时删除该Item

  • 编辑index.js文件

    $(function() {        var size = $(window).width() / 18;        $("html").css("font-size", size);        var myscroll = new IScroll("#scroll-list");        //调用我们定义的事件函数        myClickEvent($("#scroll-list li"), function() {            $(this).remove();        });    });    //定义点击事件函数，参数为点击的Item和事件的回调    function myClickEvent(clickItem, callBack) {        //点击前先移除绑定        $(clickItem).unbind();        //当点击开始时，绑定事件        $(clickItem).bind("touchstart", function() {            //设置Item为选中状态            $(this).data("touchon", true);            //设置Item选中时的背景颜色            $(this).addClass("pressState");        });        //当点击结束时，绑定事件        $(clickItem).bind("touchend", function() {            //如果是选择的Item，让回调事件绑定执行回调函数            if ($(this).data("touchon")) {                callBack.bind(this)();            }            //移除背景色            $(this).removeClass("pressState");            //设置为非选中状态            $(this).data("touchon", false);        });        //当事件为移动而非点击时，绑定事件        $(clickItem).bind("touchmove", function() {            $(this).data("touchon", false);            $(this).removeClass("pressState");        });    };

在CSS文件中，添加按下时的背景色

    .content .list ul li.pressState{        background-color: #c0c0c0;    }

• 运行项目可以看到当点击时实现了Android中的selector效果，并把点击的Item删除，而移动时并不会删除Item

• 在非移动端中，我们可以通过以下判断是否为可触碰设备，并将Item事件绑定为mousedown、mouseup即可

isTouchDevice='ontouchstart' in window || navigator.msMaxTouchPoints;