h5禁止返回事件

需求：
h5页面有进无退

对禁止后退方法统一封装：

let XBack = {};

XBack.STATE = 'x - back'
XBack.element

XBack.onPopState = function(event) {
    event.state === XBack.STATE && XBack.fire()
    XBack.record(XBack.STATE) //初始化事件时，push一下
}

XBack.record = function(state) {
    console.log(state, location.href)
    /* pushState用于向history对象添加当前页面的记录，并且改变浏览器地址栏的URL; 
    即历史记录里加入新的url地址，浏览器地址栏也会变成新的相对URL */
    history.pushState(state, null, location.href)
}

XBack.fire = function() {
    var event = document.createEvent('Events')
    /* initEvent参数(eventType: 事件类型, canBubble: 事件是否冒泡, 
    cancelable: 是否可以用preventDefault()方法取消事件) */
    event.initEvent(XBack.STATE, false, false)
    /* initEvent方法将初始化 Document.createEvent() 方法创建的合成 Event 对象的 type 属性、
    bubbles 属性和 cancelable 属性。
    只有在新创建的 Event 对象被 Document 对象或 Element 对象的 dispatchEvent() 方法分派
    之前，才能调用 Event.initEvent() 方法。*/
    XBack.element.dispatchEvent(event)
}

XBack.listen = function(listener) {
    XBack.element.addEventListener(XBack.STATE, listener, false)
}

XBack.init = function() {
    XBack.element = document.createElement('span')
    // 手动监听popstate
    // history路由是popstate监听路由变化
    window.addEventListener('popstate', XBack.onPopState)
    XBack.record(XBack.STATE)
}

XBack.remove = function(){
    window.removeEventListener('popstate', XBack.onPopState)
}

export default XBack

页面内引用:

// import 引入XBack
mounted() {
   XBack.init()
   XBack.listen(() => {})
}

// 可以在组件销毁是进行remove
destroyed() {
  XBack.remove()
}