Question

我有一个目标网页，其中有20个图像位于简单的网格中。当视口大于992px时，必须在每个图像上悬停jQuery事件，并且当视口低于992px时，必须单击jQuery事件以显示另一个图像。我已经阅读了几个处理同样问题的问题。我这样设置：

  if( w < 992){

  $('#01').on('click', function(){
    $('#riv-01').fadeIn('fast');
    $('.overlay').fadeIn('fast');
  });

  ...

  }else{

   $('#01').hover(
  function() {
    $('#riv-01').fadeIn('fast');
  },function() {
    $('#riv-01').fadeOut('fast');
  }
);

  }

但是当调整浏览器窗口大小时，例如，从大于992开始，小于992时，将执行悬停效果。

我的视口宽度为：

  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

并在发生调整大小事件时更新w：

 var resizeId;


  function resizingDone() {
   w = Math.max(document.documentElement.clientWidth, window.innerWidth ||     0);
   console.log(w);
  }

  $(window).resize(function() {
   clearTimeout(resizeId);
   resizeId = setTimeout(resizingDone, 500);
  });

我哪里错了？

由于

Answer 1

调整窗口大小时，应断开事件。

var resizeId;

 function resizingDone() {
   w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
   console.log(w);
   if (w < 992) {
     $('#01').on('click', function() {
       console.log('click');
     });
     $('#01').off('hover');
   } else {
     $('#01').off('click');
     $('#01').hover(function() {
       console.log('hover');
     });
   }
 }

 $(window).resize(function() {
   clearTimeout(resizeId);
   resizeId = setTimeout(resizingDone, 500);
 });

 resizingDone();

https://jsfiddle.net/Loy9cLcm/

Jquery文档：.off()

使用jQuery单击和悬停事件，具体取决于视口

1 个答案: