HTML5 浏览器返回按钮/手机返回按钮事件监听

1.HTML5 History对象

支持使用pushState()方法修改地址栏地址，而不刷新页面。

popstate事件

当history实体被改变时，popstate事件将会发生。调用pushState()方法或者replaceState()方法是触发，当用户点击浏览器返回按钮时也会触发。

事件注册实例：

window.addEventListener('popstate', function (event) {     console.info(event);     console.info(event.state);     console.info(event.state.id); });

2.根据这个事件，如果在触发是重新添加当前页面状态，这样的话用户通过返回按钮就无法离开这个页面了。

从而实现返回按钮被锁定的状态

<div id="number"></div>  <script>     pushHistory();     var number=0;     window.addEventListener("popstate", function (e) {         // alert("我监听到了浏览器的返回按钮事件啦"); //根据自己的需求实现自己的功能          number++;         var p=document.createElement('p');         p.innerHTML=number;         document.getElementById('number').appendChild(p);         pushHistory(); //注，此处调用，可以用户一直停留着这个页面     }, false);      function pushHistory() {         var state = {             title: "title",             url: "#"         };         window.history.pushState(state, "title", "#");     } </script>