移动端长按事件

移动端长按事件

<div class="imgBox">
    <img src="./img/a.jpg" alt="">
  </div>


...
//获取当前元素
 let imgBox = document.getElementsByClassName('imgBox')
  var timeOutEvent = 0; //设置定时器 
  imgBox[0].addEventListener('touchstart', (e) => { //手指按下去
    gtouchstart(e)
  })
  imgBox[0].addEventListener('touchend', () => { //手指抬起来
    gtouchend()
  })
  imgBox[0].addEventListener('touchmove', () => {//手指移动
    gtouchmove()
  })
  //开始按 创建定时器事件
  function gtouchstart(e) {
    timeOutEvent = setTimeout(() => {
      console.log(e.target.src);
      longPress(e.target.src)
    }, 1500);
    console.log('开始');
    return false;

    //这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适 
  };
  //手释放，如果在1500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件 
  function gtouchend() {
    clearTimeout(timeOutEvent);
    if (timeOutEvent != 0) {//如果定时器id不等于0说明是点击
      console.log('你点击了');
    }
    console.log(timeOutEvent, 'timeOutEvent');
    timeOutEvent = 0
    return false;
  };
  //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
  function gtouchmove() {
    clearTimeout(timeOutEvent);
    console.log('移动');
    timeOutEvent = 0;
  };

  //真正长按后应该执行的内容 ，这里举例子是下载保存图片1
  const longPress = (imgsrc, name = '图片名称') => {
    console.log(imgsrc);
    // //下载图片地址和图片名
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute('crossOrigin', 'anonymous');
    image.onload = function () {
      let canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      let context = canvas.getContext('2d');
      //设置画布图片大小
      context.drawImage(image, 0, 0, image.width, image.height);
      let url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
      let a = document.createElement('a'); // 生成一个a元素
      a.download = name; // 设置图片名称
      a.href = url; // 将生成的URL设置为a.href属性
      //let event = new MouseEvent('click'); // 创建一个单击事件
      //a.dispatchEvent(event); // 触发a的单击事件
      a.click()//上面两个代码等于这个代码
    };
    image.src = imgsrc;
  }