All files / evt tapStop.js

83.33% Statements 20/24
50% Branches 7/14
66.67% Functions 2/3
83.33% Lines 20/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68                            1x 1x 1x 1x   1x 1x   1x         1x 1x 1x                           1x 1x 1x 1x           1x     1x 1x       1x 1x         1x  
/**
 * 用遮罩的方式阻止 tap 事件穿透引发表单元素获取焦点。
 * - 推荐用 fastclick 来解决触屏事件穿透问题。
 * - 此组件用在 fastclick 未能解决问题时。或者不方便使用 fastclick 时。
 * @method evt/tapStop
 * @param {Object} options 点击选项
 * @param {Number} options.delay 临时浮层在这个延迟时间(ms)之后关闭
 * @example
 * var $tapStop = require('@spore-ui/kit/packages/evt/tapStop');
 * $('.mask').on('tap', function(){
 *   $tapStop();
 *   $(this).hide();
 * });
 */
var miniMask = null;
var pos = {};
var timer = null;
var touchStartBound = false;
 
var tapStop = function (options) {
  var $ = window.$ || window.Zepto || window.jQuery;
 
  var conf = $.extend({
    // 遮罩存在时间
    delay: 500,
  }, options);
 
  Eif (!miniMask) {
    miniMask = $('<div class="tap-stop-mask"></div>');
    miniMask.css({
      display: 'none',
      position: 'absolute',
      left: 0,
      top: 0,
      'margin-left': '-20px',
      'margin-top': '-20px',
      'z-index': 10000,
      'background-color': 'rgba(0,0,0,0)',
      width: '40px',
      height: '40px',
    }).appendTo(document.body);
  }
 
  Eif (!touchStartBound) {
    $(document).on('touchstart', function (evt) {
      Eif (!(evt && evt.touches && evt.touches.length)) {
        return;
      }
      var touch = evt.touches[0];
      pos.pageX = touch.pageX;
      pos.pageY = touch.pageY;
    });
    touchStartBound = true;
  }
 
  var delay = parseInt(conf.delay, 10) || 0;
  miniMask.show().css({
    left: pos.pageX + 'px',
    top: pos.pageY + 'px',
  });
  clearTimeout(timer);
  timer = setTimeout(function () {
    miniMask.hide();
  }, delay);
};
 
module.exports = tapStop;