Javascript 在特定窗口大小下禁用jQuery单击功能

我正在设计一个响应性网站，并使用媒体查询来处理响应性。不过，除了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媒体查询一样完美工作的工作解决方案？我不认为这是一个复杂的问题来解决，所以我希望有一些好的答案！提前非常感谢你们

这里有几个问题。首先，当窗口移动时，

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
    });
});

---

我最简单的方法是根本不使用

resize

事件，只需附加 单击事件，如果窗口大小不符合您的需要，则添加早期返回条件

示例代码：

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

$（'#portclick'）。单击（函数（）{
winWidth=$（窗口）.width（）；
/*也可以添加高度值*/
winHeight=$（window.height（）；
if（winWidth<992）返回；
/*你的代码执行*/
});

如果希望在调整大小后调用

If

语句，请执行以下操作：

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

$(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');
    }
}