0

我正在一个网站上工作，我们正在尝试针对 ipad 的使用进行优化。当您将 ipad 的方向更改为横向时，网站的部分应隐藏以使其更易于阅读。一切正常，但是当您从纵向更改为横向并再次返回时，它似乎将先前的 jquery 函数“排队”并一个接一个地运行它们。

因此，如果您从 0 度更改为 90 度，它会触发 90 度功能。从 90 更改为 180 然后它会触发 90 和 180 功能。从 180 更改为 -90 并触发 90、180 和 -90 函数。

有谁知道它为什么这样做以及如何阻止它？

-Edit- 排队的功能是点击事件。这导致，当单击按钮时，目标 div 的高度像手风琴一样迅速增加和减少！

下面的代码：

jQuery(window).bind('orientationchange', function(e) {

          if(Math.abs(window.orientation) == 0){
              $('#slider').animate({height:'375px'});$('#top').animate({height:'445px'});$('#strap').animate({top:'445px'}, false);

              $("a.more-button").click(function(){
                  $('#slider').css({'height':'375px'});$('#top').css({'height':'445px'});$('#strap').css({'top':'445px'});
                  console.log('it fired 0');    
              });
              return false;
          }

          if(Math.abs(window.orientation) == 90){
            $("a.more-button").click(function(){
              $('#slider').animate({height:'0px'}); $('#top').animate({height:'130px'}); $('#strap').animate({top:'130px'}, false);
              console.log('it fired 90');   
            });

          $("#next-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $("#prev-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $(".menu-link").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          return false;
          }

          if(Math.abs(window.orientation) == -90){
              $("a.more-button").click(function(){
                  $('#slider').animate({height:'0px'}); $('#top').animate({height:'130px'}); $('#strap').animate({top:'130px'}, false);
                  console.log('it fired -90');  
              });

          $("#next-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $("#prev-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $(".menu-link").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          return false;
        }

          if(Math.abs(window.orientation) == 180){
              $('#slider').animate({height:'375px'});$('#top').animate({height:'445px'});$('#strap').animate({top:'445px'}, false);
              $("a.more-button").click(function(){
                  $('#slider').css({'height':'375px'});$('#top').css({'height':'445px'});$('#strap').css({'top':'445px'});
                  console.log('it fired 180');      
              });
              return false;
          }

  }, false);

-编辑-解决方案！按照西蒙的建议，我用他的代码和另一个用户的混合代码解决了这个问题（谁没有留下他们的名字，所以我不能相信）。

$(window).bind("resize", function(){
    screenOrientation = ($(window).width() > $(window).height())? 90 : 0;

    $("a.more-button, #next-page, #prev-page, .menu-link").off(".MyClickEvents");

    if (screenOrientation === 90) {
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false);
            console.log('it fired 90');
        });

        $("#next-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $("#prev-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $(".menu-link").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
    } else {
      $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        console.log('portrait');
      $("a.more-button").on("click.MyClickEvents", function () {
          $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' });
          console.log('it fired 0');
      });
    }
});
4

1 回答 1

0

您正在绑定您的 click 事件处理程序，orientationchange以便它们排队。尝试将您的事件放在命名空间中，并orientationchange在重新绑定之前取消绑定此命名空间中的所有事件。她举个简单的例子：

// assume these are the events bound to different some buttons
$('#foo').on('click.myNS', ...);
$('#bar').on('keyup.myNS', ...);
$('#baz').on('dblclick.myNS', ...);    

// magic occurs here...
$('#foo, #bar, #baz').off('.myNS');

// ...and afterwards, the three binds from above are gone

因此，在您的情况下，它将是：

jQuery(window).bind('orientationchange', function (e) {

    // First of all, we need to unbind previous events
    $("a.more-button, #next-page, #prev-page, .menu-link").off(".MyClickEvents");

    if (Math.abs(window.orientation) == 0) {
        $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);

        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' });
            console.log('it fired 0');
        });
        return false;
    }

    if (Math.abs(window.orientation) == 90) {
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false);
            console.log('it fired 90');
        });

        $("#next-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $("#prev-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $(".menu-link").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        return false;
    }

    if (Math.abs(window.orientation) == -90) {
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false);
            console.log('it fired -90');
        });

        $("#next-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $("#prev-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $(".menu-link").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        return false;
    }

    if (Math.abs(window.orientation) == 180) {
        $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' });
            console.log('it fired 180');
        });
        return false;
    }

}, false);
于 2013-02-04T12:36:39.243 回答