鼠标长按事件和移动端长按事件

最近在做一个移动端的网页,有一个需求是长按图片在手机浏览器的长按事件触发之前,图片要发生一次改变,想到的解决方法是添加一个长按事件但是时间比手机浏览器的时间短,就可以在它之前触发,因此在网上看到了两种长安事件,一种是用onmousedown;另一种是ontouchstart;测试后发现onmousedown适用于pc端,ontouchstart适用于移动端。下面是它们实现长按事件的代码:(来源于网上其他大神的博客)


第一种:onmousedown(源于:http://www.jb51.net/article/60675.htm)

var timeout;
function down(){
  sysAlert("down")
  timeout = setTimeout(function() {
   alert("鼠标长按事件")
  },50);
}
function up(){
  clearTimeout(timeout);
}

第二种:(源于http://tieba.baidu.com/p/2677538856)

 var timeOutEvent=0;//定时器
  //开始按
  function gtouchstart(){
    timeOutEvent = setTimeout("longPress()",500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适
    return false;
  };
  //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
  function gtouchend(){
    clearTimeout(timeOutEvent);//清除定时器
    if(timeOutEvent!=0){
//这里写要执行的内容(尤如onclick事件)
      alert("你这是点击,不是长按");
    }
    return false;
  };
  //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
  function gtouchmove(){
    clearTimeout(timeOutEvent);//清除定时器
    timeOutEvent = 0;
  };

  //真正长按后应该执行的内容
  function longPress(){
    timeOutEvent = 0;
//执行长按要执行的内容,如弹出菜单
alert("手机长按事件")
}

猜你喜欢

转载自blog.csdn.net/u010591939/article/details/49662119
今日推荐