如何在某些设备宽度以下禁用 JQuery？答案

【问题标题】：How do I disable JQuery below certain device widths?如何在某些设备宽度以下禁用 JQuery？
【发布时间】：2017-04-15 22:29:21
【问题描述】：

我希望在移动设备宽度（768 像素及以下）处停止 JQuery 函数。我尝试使用 $(window).width() 来检测屏幕宽度，然后使用 if 语句，但似乎无法正常工作。

$(document).ready(function(){
  var resolution = $(window).width();
  if (resolution >= 768) {
    $('.img-1').hover(function(){
        $(this).animate({right: "350px"},1000);
        $('#desc1').show(1000);
    });
    $('.img-1').mouseleave(function(){
        $(this).animate({right: "0px"},1000);
        $('#desc1').hide(1000);
    });
  } else {
    // NO SCRIPT
  }
});

这是它的codepen的链接：http://codepen.io/SRBET/pen/dOJoJb/

任何帮助将不胜感激！

谢谢

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

试试这个：

var resolution = $(window).width();
if (resolution > 768) {

  $(document).ready(function(){

  $('.img-1').hover(function(){
     $(this).animate({right: "350px"},1000);
     $('#desc1').show(1000);
 });
 $('.img-1').mouseleave(function(){
    $(this).animate({right: "0px"},1000);
    $('#desc1').hide(1000);
 });
});

} else {
// NO SCRIPT
}

在ready函数之前使用if条件。它在代码面板中工作（我已经在 chrome 上尝试过）。如果您希望它在 768px 上不起作用，也请删除等号。

【讨论】：

@A.Wolff ：检查 cmets 并且我已经更改了 if 条件的位置。现在准备功能将不会在小宽度设备上执行。

【解决方案2】：

我们想要实现两件事。

确保效果确实可以应用到移动屏幕设备上。
确保在屏幕宽度更改为超过 768 像素时应用效果确实。

那么，我们怎样才能以最合乎逻辑的方式实现这一点呢？

var resetEvents = function() {
	$('.img-1').off()
	$('#desc1').off()
	checkScreen();
}

var checkScreen = function() {
  if ($(window).width() >= 768) {
    $('.img-1').hover(function(){
        $(this).animate({right: "350px"},1000);
        $('#desc1').show(1000);
    });
    $('.img-1').mouseleave(function(){
        $(this).animate({right: "0px"},1000);
        $('#desc1').hide(1000);
    });
  }
}

$(document).ready(function(){
	resetEvents();
	$(window).resize(function() {
		resetEvents()
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img-1">hi, i'm img-1</div>
<div style="display:none;" id="desc1">hi, i'm desc1</div>

（全屏打开以查看事件的工作情况，小屏查看它们已禁用）

我已将您的代码封装在多个函数中，并在$(document).ready() 上调用第一个函数。第一个函数重置元素上的所有当前事件侦听器。然后调用第二个函数。

在第二个函数中，我们检查窗口的（新的？）宽度，如果满足要求，则应用事件侦听器。最后，我们确保将resetEvents() 事件附加到resize 事件中，这样当有人在iPad 上改变方向时，他或她仍然可以体验到这些事件。

【讨论】：

【解决方案3】：

Jquery $(selector).off() 用于移除 Jquery 事件。在更新的 codepen 中找到解决方案： http://codepen.io/Debabrata89/pen/xRpwOG 。刷新 768px 以下的页面，可以看到 $('.img-1').hover() 函数没有被调用。另外，与 $(document).ready() 一起，使用 $(window).resize() 和去抖动函数并在其中编写逻辑。

 var resolution = $(window).width();
if (resolution >= 768) {

$(document).ready(function(){
$('.img-1').hover(function(){
    $(this).animate({right: "350px"},1000);
    $('#desc1').show(1000);
});
$('.img-1').mouseleave(function(){
    $(this).animate({right: "0px"},1000);
    $('#desc1').hide(1000);
});
});
  } else {
$('.img-1').off("hover");
}

$(document).ready(function(){
$('.img-2').hover(function(){
    $(this).animate({right: "350px"},1000);
    $('#desc2').show(1000);
});
$('.img-2').mouseleave(function(){
    $(this).animate({right: "0px"},1000);
    $('#desc2').hide(1000);
});
});

【讨论】：