JS 移动端篇

JS 移动端

• 事件源对象:

  真正触发该事件的源头对象, 最终指向的是html元素。事件是会传播的 —> 事件代理, 利用事件冒泡的特点。

  box.onclick = function(e){
       
      // 获取事件源对象   事件对象.target
      var even = e || event;
      console.log(even.target, this);
  }
  

• 移动端优先级较高的事件：

  来电, 闹铃, 事件提醒

• 移动端常用事件

  1. ontouchstart 开始触摸

  2. ontouchmove 移动触摸

  3. ontouchend 触摸结束

     toucheend表示主动放弃触摸时触发的事件

  4. ontouchcancle 触摸取消

     touchcancle表示被动结束触摸行为, 当某些优先级较高的行为发生时, 系统会触发touchcancle, 丢弃之前的行为

  注：我们可以在touchcancle事件里 做一些数据的保存, 视频游戏的暂停 类似的保护性工作

• 移动端常用的事件属性

  以下属性的值都是一个集合(数组)

  1. touches 屏幕上所有触摸点的集合
  2. targetTouches 事件源对象上的所有触摸点的集合
  3. changedTouches 距离最近一次触摸点变化的集合

  <script type="text/javascript">
  //例1：
  div1.ontouchstart = function(e){
       
      var even = e || event;
      alert("touches:" + even.touches.length + ", targetTouches:" + even.targetTouches.length + ", changedToches:" + even.changedTouches.length);
  }
  			
  div1.ontouchmove = function(e){
       
      var even = e || event;
      even.preventDefault();
      this.innerHTML += "移动了!";
  }
  
  div1.ontouchend = function() {
       
      alert("触摸结束!");
  }
  
  //例2：
  function randomColor() {
       
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
  }
  			
  div1.ontouchstart = function() {
       
      this.innerHTML = "开始触摸!";
  }
  div1.ontouchmove = function(e) {
       
      var even = e || event;
      even.preventDefault();
      this.innerHTML = "触摸移动!";