Question

JS / jQuery的新手，但我认为到目前为止我已经成功地解决了这个问题......

我启用了点击功能，如果在移动设备上或平板电脑上（肖像），但是我注意到如果在平板电脑上我将它转向横向更改它仍然让我点击并触发功能。

如何调整下面的代码，如果在平板电脑上更改为横向，则不会触发JS点击内容？

// mobile
var isMobile = window.matchMedia("only screen and (max-width : 40em)");

// tablet
var isTablet = window.matchMedia("only screen and (max-width : 60em)");
var isTabletPortraitOnly = window.matchMedia("only screen and (max-width : 60em) and (orientation : portrait)");

/* mobile cart slideout */
// open the lateral panel
if(isMobile.matches || isTabletPortraitOnly.matches){
  var $miniCart = $('#cart_over');
  var $cartLink = $('.mini-cart');
  var $siteContent = $('.top-header-container, .main-content, footer');

  $cartLink.on('click', function(event){
    event.preventDefault();
    if ($miniCart.hasClass("cart-slide-in")) {
      $miniCart.addClass("cart-slide-out");
      $siteContent.addClass("content-slide-in");
    } else if ($miniCart.hasClass("cart-slide-out")) {
      $miniCart.removeClass('cart-slide-out');
      $miniCart.addClass("cart-slide-in");
    } else {
      $miniCart.addClass("cart-slide-in");
    }

    if ($siteContent.hasClass("content-slide-out")) {
      $siteContent.addClass("content-slide-in");
      $siteContent.removeClass("content-slide-out");
    } else if ($siteContent.hasClass("content-slide-in")) {
      $siteContent.addClass("content-slide-out");
      $siteContent.removeClass("content-slide-in");
    } else {
      $siteContent.addClass("content-slide-out");
    }
  });

  //clode the lateral panel
  $('#cart_close').on('click', function(event){

    if ($miniCart.hasClass("cart-slide-in")) {
      $miniCart.removeClass('cart-slide-in');
      $miniCart.addClass('cart-slide-out');
      $siteContent.removeClass("content-slide-out");
      $siteContent.addClass("content-slide-in");      
      event.preventDefault();
    }
  });
}

更新

我设法解决了这个问题......

$(window).bind('orientationchange', function(event) {
  alert('new orientation:' + orientation); 
});

然而它为风景返回90或-90，为肖像返回0或180 ...我猜也许接近但不是所以我只是使用if语句所以如果90或-90这样做...或者是否有更好的只做肖像或风景的方式？

更新2

我想也许如果我将条件添加到一个函数中并设置加载和方向更改可能会再次检查...但不确定它是....认为我在正确的轨道上任何想法与以下？

function cartSlide(){
  if(isMobile.matches || isTabletPortraitOnly.matches){
    var $miniCart = $('#cart_over');
    var $cartLink = $('.mini-cart');
    var $siteContent = $('.top-header-container, .main-content, footer');

    $cartLink.on('click', function(event){
      event.preventDefault();
      if ($miniCart.hasClass("cart-slide-in")) {
        $miniCart.addClass("cart-slide-out");
        $siteContent.addClass("content-slide-in");
      } else if ($miniCart.hasClass("cart-slide-out")) {
        $miniCart.removeClass('cart-slide-out');
        $miniCart.addClass("cart-slide-in");
      } else {
        $miniCart.addClass("cart-slide-in");
      }

      if ($siteContent.hasClass("content-slide-out")) {
        $siteContent.addClass("content-slide-in");
        $siteContent.removeClass("content-slide-out");
      } else if ($siteContent.hasClass("content-slide-in")) {
        $siteContent.addClass("content-slide-out");
        $siteContent.removeClass("content-slide-in");
      } else {
        $siteContent.addClass("content-slide-out");
      }
    });

    //clode the lateral panel
    $('#cart_close').on('click', function(event){

      if ($miniCart.hasClass("cart-slide-in")) {
        $miniCart.removeClass('cart-slide-in');
        $miniCart.addClass('cart-slide-out');
        $siteContent.removeClass("content-slide-out");
        $siteContent.addClass("content-slide-in");      
        event.preventDefault();
      }
    });
  }
}

// open the lateral panel
if(isMobile.matches || isTabletPortraitOnly.matches){
  cartSlide();
}

$(window).bind('orientationchange', function(event) {
  cartSlide();
});

JS / jQuery检测方向更改并仅允许基于

0 个答案: