Android2系でも動く?簡単なオーバーレイメニューの実装

overlaymenu.js

(function(global) {

  /**
   * overlay menu
   */
  function overlayMenu($menu, $open, $close) {
    var $inner = $menu.find('.inner');
    var $body = $('body');

    function open(ev) {
      var w = $body.width();
      var h = $body.height();
      // Android2系で下の要素が反応してしまう不具合に対応
      $('select').addClass('overlayHide');
      $menu.css('width', w + 'px').css('height', h + 'px');
      $menu.fadeIn();
      return false;
    }
    function close(ev) {
      // Android2系で下の要素が反応してしまう不具合に対応
      $('select').removeClass('overlayHide');
      $menu.fadeOut();
      return false;
    }
    var wtimer = false;
    function resize(ev) {
      if (wtimer !== false) {
        clearTimeout(wtimer);
      }
      wtimer = setTimeout(function() {
        var w = $body.width();
        var h = $body.height();
        $menu.css('width', w + 'px').css('height', h + 'px');
      }, 200);
    }

    // open button
    $open.on('click', open);
    // close button
    $close.on('click', close);
    // menu background
    $menu.on('click', close);
    // menu body
    $inner.on('click', function(ev) { ev.stopPropagation(); });
    // Android2系で下の要素が反応してしまう不具合に対応
    $menu.on('touchstart', 'a', function(ev) {
      ev.stopPropagation();
    });
  }


  // export global gc object
  global.myapp = {
    overlayMenu: overlayMenu,
  };

}(this));