阅读 36
JS实现列表长按删除、点击打开

JS实现列表长按删除、点击打开

需求

  1. 对节点长按进行删除
  2. 对节点点击打开打开网页

思路

利用 touchstart,touchmove,touched开实现。

  1. 当一个或多个触摸点与触控设备表面接触时触发touchstart 事件
  2. 当触点在触控平面上移动时触发touchmove事件
  3. 当触点离开触控平面时触发touchend事件

let tab =$(`
<div class="tab">
   <div class="imgBg">
      <img src="${node.tab_icon}">
   </div>
   <div>${node.tab_name.toUpperCase()}</div>
</div>`).insertBefore($('.add_tab'))
tab.on({
   touchstart: function(e) {
       // 长按事件触发
       timeOutEvent = setTimeout(function() {
           timeOutEvent = 0;
           tabList.splice(index,1)
           render_Tab()
       }, 400);
       //长按400毫秒
       // e.preventDefault();
   },
   touchmove: function() {
       clearTimeout(timeOutEvent);
       timeOutEvent = 0;
   },
   touchend: function() {
       clearTimeout(timeOutEvent);
       if (timeOutEvent !== 0) {
           window.open(node.tab_url,'_self')
       }
       return false;
   }
})

复制代码
文章分类
前端
文章标签