触摸与滑动事件

1. tap触摸事件，点击目标进行隐藏

$(document).on("pageinit",function(){
   $("p").on("tap",function (){
   $(this).hide();
   });
});

2. taphold长按事件，单击没有效果，长按后目标进行隐藏

$(document).on("pageinit",function(){
   $("p").on("taphold",function (){
   $(this).hide();
   });
});

3. swipe滑动事件，左右滑动均会隐藏，上下滑动无反应

$(document).on("pageinit",function(){
   $("p").on("swipe",function (){
   $(this).hide();
   });
});

4. swipeleft向左滑动处理
5. swiperight向右滑动处理
6. scrollstart滑动页面触发（上下滑动），开始滑动时弹窗

$(document).on("pageinit",function(){
   $(document).on("scrollstart",function (){
   alert("开始滑动");
   });
});

7. scrollstop停止滑动触发
8. orientationchange设备方向变化触发

---

jQuery Mobile 页面事件

页面加载事件

1. pageinit在DOM元素加载完成后来进行处理页面元素加载完成后触发的事件

$(document).on("pageinit",function(){
    alert("1")
});

2. pagebeforeload在任何页面加载请求之前触发
3. pageload在页面已成功加载后触发
4. pageloadfailed页面加载请求失败触发，给出一个不存在或者错误的外部页面链接，点击后会出现不存在的弹窗提示

$(document).on("pageloadfailed",function(event,data){
    alert("页面不存在");
});

---

页面过渡事件

1. pagebeforeshow在转到其他页面之前先触发本事件

$(document).on("pagebeforeshow",function(){
    alert("触发pagebeforeshow  ");
});

2. pageshow在转到其他页面之后触发

$(document).on("pageshow",function(){
    alert("触发pageshow  ");
});

3. pagebeforehide在转到其他页面（隐藏本页面）之前先触发本事件

$(document).on("pagebeforehide",function(){
    alert("触发 pagebeforehide ");
});

4. pagehide在转到其他页面（隐藏本页面）之后触发

$(document).on("pagehide",function(){
    alert("触发 pagehide ");
});

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>主页</h1>
    </div>
    <div data-role="content">
            <p><a href="#page2">跳转到二</a></p>
    </div>
    <div data-role="footer">
        <h1>底部</h1>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>主页</h1>
    </div>
    <div data-role="content">

---

页面更改事件

• pagebeforechange在页面更改期间触发两次

$(document).on("pagebeforechange",function(){
    alert("触发pagebeforechange ");
});

---