禁止微信h5下拉显示域名

需求

最近项目中产品提了一个需求，要在城市选择组件中添加字母导航，可快速定位到用户选择的城市索引下。

遇到的问题

虽然整体功能已完成，如下图所示。

但是由于项目大多数在微信 h5 环境下，需要测试特殊情景，比如微信下当页面滑到顶端，在往下滑会显示当前域名信息。这时就出现一个问题，由于我是监听了touchend事件来加载当前字母索引城市列表，但页面下拉时，会阻断这个事件，其实并没有触发到touchend事件，如下图所示。（touchstart添加背景阴影，touchend去除阴影）

解决办法

于是想到在字母导航条上触发的touchstart事件，禁止它出现下拉显示域名信息，在touchend事件后在恢复。禁止下拉代码如下：

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

this.rightBoxEle.on('touchstart', function(){
    // 加阴影效果
    _this.rightBoxEle.addClass("select");

    // 解决在微信下，下拉显示网址导致触发不到touchend问题
    document.addEventListener('touchmove', preventDefault, {
      capture: false,
      passive: false
    });
  });

this.rightBoxEle.on('touchend', function(e){
    /* ...动态加载当前字母城市列表代码 */

    // 去除阴影效果
    _this.rightBoxEle.removeClass("select");

    // 恢复页面下拉显示域名信息
    document.removeEventListener('touchmove', preventDefault, false);
}

效果如下：

其实还有一种情景是长按触发右键，也会阻断touchend事件，需要处理document.oncontextmenu事件，禁止右键就好了