在特定窗口大小禁用 jQuery 点击功能答案

【问题标题】：Disabling jQuery click function at certain window size在特定窗口大小禁用 jQuery 点击功能
【发布时间】：2014-10-22 00:38:48
【问题描述】：

我正在设计一个响应式网站并使用媒体查询来处理响应性。但是，除了 CSS 之外，我还想在某个窗口宽度上禁用某些 jQuery 点击功能。

现在我可以在页面加载时成功执行此操作，但假设用户调整了窗口大小，我也希望能够执行此操作。

（第 3 段） 例如，如果用户从他/她的计算机上的一个非常大的窗口开始，他/她将其调整为一个非常小的窗口，他/她不应该这样做能够激活点击功能了。相反，如果用户从他/她的计算机上的一个非常小的窗口开始并将其调整为非常大，他/她应该能够激活点击功能。

我尝试了多种解决方案，但似乎都不起作用。

基本上我想让一些可点击的对象不再可点击，或者至少让它们点击并且在特定的窗口宽度上什么都不做。

只需在页面加载时检查，没有其他时间可以这样做，这样第 3 段中应该发生的事情就不会发生。

$(document).ready(function(){
  if($(window).width() > 992){
    $('#portclick').click(function(){
      $('#pagecont').slideToggle(500);
      $('#icons').slideToggle(500);
})}})

$(document).ready(function(){
  if($(window).width() > 992){
    $('#name').click(function(){
      $('#projects').slideToggle(500);
})}})

我尝试删除用于在某些窗口宽度上调用该函数的 id 属性，并以该宽度读取它们，但这似乎也不起作用。删除 id 似乎根本不会禁用点击功能。

我最近最接近的解决方案是将点击功能绑定到窗口调整大小。到目前为止，这是可行的，但它非常有问题，所以当你达到点击功能起作用的宽度并尝试点击它时，它会在它停止之前执行大约 100 次切换功能。但它确实维持了第 3 段中描述的条件。

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

$(window).resize(function(){
  if($(window).width() > 992){
    $('#portclick').click(function(){
      $('#pagecont').slideToggle(500);
      $('#icons').slideToggle(500);
  })}
  else return})

$(window).resize(function(){
  if($(window).width() > 992){
    $('#name').click(function(){
      $('#projects').slideToggle(500);
  })}
  else return})

有没有人想出一个可以像 CSS 媒体查询一样完美运行的有效解决方案？我不认为这是一个复杂的问题，所以我希望得到一些好的答案！提前非常感谢你们！

【问题讨论】：

标签： javascript jquery responsive-design click

【解决方案1】：

这里有几个问题。首先，resize 在窗口移动时几乎不断触发，所以实际上不要触发任何东西。其次，您应该只绑定一次事件处理程序（或者如果您必须绑定多次，请确保清除旧的处理程序。）您可以这样简化：

$(document).ready(function() {
    var isLargeWindow;
    $(window).on('resize', function() {
        isLargeWindow = $(this).width() > 992;
    });

    $('#whatever').on('click', function(e) {
        if (isLargeWindow)
            // do large window stuff
        else
            // do small window stuff
    });
});

【讨论】：

【解决方案2】：

我最简单的方法是根本不使用resize 事件，只需附加如果窗口大小不适合您的需求，则单击事件并添加提前返回期限。

示例代码：

$('#portclick').click(function(){
    winWidth = $(window).width();
    /* You can add an height value too */ 
    winHeight = $(window).height();
    if ( winWidth < 992 ) return;
    /* Youe Code Executes */
});

【讨论】：

【解决方案3】：

如果您希望在调整大小发生后调用 if 语句，请执行以下操作： http://jsfiddle.net/sLk5ro6c/1/

$(window).resize(function (e) {
    window.resizeEvt;
    $(window).resize(function () {
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function () {
            doneresizing();
        }, 250);
    });
});

function doneresizing() {
    if ($(window).width() > 500) {
        // DO SOMETHING HERE
        alert('example');
    }
}

这样在调整窗口大小时不会每次都调用代码

【讨论】：