移动端项目 添加 触屏 swipe事件[记录]

avalon 触屏 事件 

  tap, longtap, doubletap
  swipe, swipeleft, swiperight,swipedown,swipeup
  pinch, pinchstart,pinchend,pinchin,pinchout
  drag,dragstart,dragend,
  rotate,rotatestart,rotateend

移动端 触屏事件添加 测试  (https://segmentfault.com/a/1190000006012676)

  挑选用到的模块加 例如  swipe  ----  require 进入

  ms-on-swipe="@fn" (@fnTest($event))

  fn: function(e){ console.log(e) }

  fnSwipeLeft:function(e){ if(e.originalEvent.direction=="left") mstestTouch.swipeLeftFn(e); },

  slideWrap.style.left =-(index+1)*100+"%";

移动端 双击  (两个单击 时间<0.5)

  var backSecond = 0;

  var curSecond = new Date().getSeconds();
  if (Math.abs(curSecond - backSecond) > 0.5) {
    backSecond = curSecond;
  } else {
    this.isDoubleClick="双击666";
    setTimeout(function () {
      mstestTouch.isDoubleClick="点击我进行双击";
    },1500);
  }
  //禁止事件冒泡
  event.stopPropagation();

  

移动端 点击问题

  网页端 用 ms-on-click

  手机端 用 ms-on-tap (tap 代替 click )click会不好用

  自己写的双击出问题  暂时  添加a

    <li><a href="javascript:void(0)" ms-on-tap="@fnDoubleClick($event)">手势手机a--{{@isDoubleClick}}</a></li>

移动端 延迟300秒问题

  禁止缩放 viewport

avalon获取所操作的该元素

  <li ms-on-tap="@fnSwipeLeft">向左滑动,显示下一页</li>

  fnSwipeLeft: function(e) {var target = e.target;}

时间: 2024-10-06 23:04:36

移动端项目 添加 触屏 swipe事件[记录]的相关文章

移动端touch触屏滑动事件、滑动触屏事件监听!

移动端touch触屏滑动事件.滑动触屏事件监听! 一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小

JS移动客户端--触屏滑动事件 banner图效果

JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取

android ViewGroup和View触屏基础事件OnTouch处理

分发事件:dispatchTouchevent 截断事件:interceptTouchEvent 触摸事件:OnTouch 父视图的分发事件返回true,父视图处理触摸事件事件,父视图触摸事件返回false,由所在的activity处理:返回true,仍然可以接收到触摸事件: 父视图的分发事件返回false,则截断事件触发: 截断事件返回true,自己处理触摸事件,不交由子视图处理: 截断事件返回false,子视图分发事件: 截断事件false,处理事件true,子视图处理事件为true,则父视

WPF触屏Touch事件在嵌套控件中的响应问题

原文:WPF触屏Touch事件在嵌套控件中的响应问题 前几天遇到个touch事件的坑,记录下来以增强理解. 具体是 想把一个listview嵌套到另一个listview,这时候如果list view(子listview)的内容过多超过容器高度,它是不会出现滚动条压缩内容区域的,反而会将滚动区域转移到外面的list view(父listview),这个无可争议,但这个问题开始没留意,为待会的坑埋下伏笔. 因为 然后就是设置鼠标滚轮. 首先我使用了MouseWheel事件,奇怪的是它明明是个路由事件

移动端触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个

JS移动客户端--触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

touch移动触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 四种touch事件 touchstart 当手指触摸到屏幕时触发,即使已经有一个手指放在了屏幕上也会触发. touchmove 当手指在屏幕上连续滑动时触发,在这个事件发生期间,调用preventDefault()可阻止滚动. touchend 当手指从屏幕上移开时触发

给jquery 添加触屏事件,上下左右 touchwipe插件

touchwipe.js (function($){$.fn.touchwipe=function(settings){var config={min_move_x:20,min_move_y:20,wipeLeft:function(){},wipeRight:function(){},wipeUp:function(){},wipeDown:function(){},preventDefaultEvents:true};if(settings)$.extend(config,settings

touchstart、touchmove、touchend 实现移动端上的触屏拖拽

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1