Question

我正在设计一个响应式网站，我正在使用媒体查询来处理响应速度。然而，除了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似乎根本不会禁用单击功能。

我最近的解决方案就是将click函数绑定到window resize。到目前为止，这是有效的，但它是非常错误的，所以当你达到点击功能工作的宽度，你尝试点击它将在它停止之前做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媒体查询一样完美运行的工作解决方案呢？我不认为这是一个复杂的问题，所以我希望得到一些好的答案！非常感谢你们这些人！

Answer 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 }); });几乎不停地发射，所以实际上并没有触发任何东西。其次，您应该只绑定一次事件处理程序（或者如果您必须绑定多次，请确保清除旧的。）您可以这样简化：

{{1}}

Answer 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 */
});

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

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

在某个窗口大小禁用jQuery单击功能

3 个答案: