• 新规:续航150公里以下新能源车取消补贴 2019-10-11
  • 法国革命时代,女人流行穿什么 2019-10-11
  • 黑龙江省县(市、区)委统战部长培训班举办 2019-10-06
  • “夏季第一瓜”竟是它! 2019-10-06
  • 《阿古顿巴》藏语版在藏语卫视首播 2019-09-06
  • 晋中市“三同步”推动互联网治理创新 2019-08-27
  • 法媒:研究称美国人常用药物或增加抑郁风险 2019-08-27
  • 宝贝是地名,你能想到这么浪漫的地名在哪儿吗? 2019-08-15
  • 何树山副省长到方圆机电调研指导工作 2019-08-15
  • 内蒙古11走势选5走势图:js实现滑动触屏事件监听的方法

    来源:本网整理

    彩票双色球历史开奖结果 www.s9h6.com 本文实例讲述了js实现滑动触屏事件监听的方法。分享给大家供大家参考。具体实现方法如下:

    function span_move_fun(){
     var span = document.getElementById("move_k");
     var span_left = $(span).offset().left;
     var span_top = $(span).offset().top;
     var start_left = $(span).offset().left;
     var start_top = $(span).offset().top;
     span.addEventListener('touchstart', function(event) {
      event.preventDefault();
      if (event.targetTouches.length == 1) {
         var touch = event.targetTouches[0];
         span.style.position = "absolute";
      span_top = $(this).offset().top;
      span_left = $(this).offset().left;
      start_top = touch.pageY
      start_left = touch.pageX
         var left = parseFloat(touch.pageX - start_left + span_left-30);
         var top = parseFloat(touch.pageY - start_top + span_top-73);
      span.style.left = String(left) + 'px';
      span.style.top = String(top) + 'px';
         }
       });
       span.addEventListener('touchmove', function(event) {
      event.preventDefault();
      if (event.targetTouches.length == 1) {
      var touch = event.targetTouches[0];
      span.style.position = "absolute";
      var left = parseFloat(touch.pageX - start_left + span_left-30);
         var top = parseFloat(touch.pageY - start_top + span_top-73);
      span.style.left = String(left) + 'px';
      span.style.top = String(top) + 'px';
      }
     });
       span.addEventListener('touchend', function(event) {
       var touch = event.changedTouches[0];
       if(parseFloat(touch.pageX - start_left + span_left-30) <= -5 || parseFloat(touch.pageX - start_left + span_left-30) >= 620 || parseFloat(touch.pageY - start_top + span_top-73) <= -38 || parseFloat(touch.pageY - start_top + span_top-73) >= 587){
        span.style.left = String(span_left-30) + 'px';
      span.style.top = String(span_top-73) + 'px';
       }
      event.stopPropagation();
     });
    }

    js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。

    touchstart在触摸开始时触发事件

    touchend在触摸结束时触发事件

    touchmove这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在 touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发。

    这三个事件都都有一个 timeStamp 的属性,查看 timeStamp 属性,可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。

    下面是一段代码实例:

    document.getElementsByTagName_r('body')[0].addEventListener('touchstart',function(e){
        nStartY = e.targetTouches[0].pageY;
        nStartX = e.targetTouches[0].pageX;
    });
    document.getElementsByTagName_r('body')[0].addEventListener('touchend',function(e){
        nChangY = e.changedTouches[0].pageY;
        nChangX = e.changedTouches[0].pageX;
    });

    PS:
    1. touch事件跟click事件是不会被同时触发的。现在的移动设备做的比较好,已经把这个问题完美的避免掉了。

    2. 注意触摸的开始和结束位置的位移大小。如果位移小过小应该不做任何动作。

    希望本文所述对大家的javascript程序设计有所帮助。

  • 本文相关:
  • jQuery的css() 方法使用指南
  • jQuery的几个我们必须了解的特点
  • 浅谈被jQuery抛弃的函数及替代函数
  • jQuery中 attr() 方法使用小结
  • JQuery简单实现锚点链接的平滑滚动
  • Jquery中的$.each获取各种返回类型数据的使用方法
  • 浅谈javascript语法和定时函数
  • javascript结合canvas实现图片旋转效果
  • jquery插件hiAlert实现网页对话框美化
  • php+ajax+jquery实现点击加载更多内容
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 彩票双色球历史开奖结果 - 频道导航
    Copyright © 2017 彩票双色球历史开奖结果 www.s9h6.com All Rights Reserved
  • 新规:续航150公里以下新能源车取消补贴 2019-10-11
  • 法国革命时代,女人流行穿什么 2019-10-11
  • 黑龙江省县(市、区)委统战部长培训班举办 2019-10-06
  • “夏季第一瓜”竟是它! 2019-10-06
  • 《阿古顿巴》藏语版在藏语卫视首播 2019-09-06
  • 晋中市“三同步”推动互联网治理创新 2019-08-27
  • 法媒:研究称美国人常用药物或增加抑郁风险 2019-08-27
  • 宝贝是地名,你能想到这么浪漫的地名在哪儿吗? 2019-08-15
  • 何树山副省长到方圆机电调研指导工作 2019-08-15
  • 浙江体彩20选5开奖 pk10计划软件手机版 全网最早原创36码特谁 晋江篮球客直播 上港预备队比赛延期 黑龙江福彩p62图表 竟彩足球比分直播现场彩客网 成语一肖中特 北京pk赛车计划最准网页 重庆快乐十分娱乐城 任选9奖金预测 必赢真人龙虎斗开户平台 哪个平台玩棋牌能换真钱 nba篮球比分直播 重庆托管农场