手机触摸事件

Author Avatar ZTFtrue 发表于 • 2018年02月05日 14:04 • 共 • 58 • 次浏览

鼠标的在此

手机触摸事件

MDN 地址

  1. ontouchstart事件,触摸开始事件,当手机屏幕被触摸的瞬间触发。
    var target = document.getElementById("target");
    target.ontouchstart = function(e){
    var touch = e.touches[0];
    var x = Number(touch.clientX);
    var y = Number(touch.clientY);
    console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y);
    };
  1. ontouchmove事件,触摸的整个过程触发,当手指在屏幕上移动的时候触发。
    var target = document.getElementById("target");
    target.ontouchmove = function(e){
    var touch = e.touches[0];
    var x = Number(touch.clientX);
    var y = Number(touch.clientY);
    console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y);
    };
  1. ontouchend事件,触摸结束的瞬间触发,即当手指离开屏幕时触发。(非标准)[https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontouchend]
var target = document.getElementById("target");
    target.ontouchstart = function(e){
    var touch = e.touches[0];
    box1.style.backgroundColor = 'green';
    };
  1. ontouchcancel事件,触摸过程被系统取消时触发,当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。
  2. ongesturechange事件,必须是多点触摸才可触发事件,比如手机中的旋转、缩放等操作。如:
    var target = document.getElementById("target");
    target.ongesturechange = function(e){
    //scale代表手势产生的缩放比例,小于1是缩小,大于1是放大,原始为1
    var scale = e.scale;
    //rotation代表旋转手势的角度,值区间[0,360],正值顺时针旋转,负值逆时针
    var angle = e.rotation;
    };

附注:

阻止浏览器默认事件

  target.addEventListener("click",function(event){
    event.preventDefault();
  });
最后编辑于 • 2018年02月05日 14:24 •  

你尚未登录,无法进行回复。