响应菜单 js (clear dom?）

Reponsive Menu Js (clear dom?)

本文关键字：dom clear 菜单 js 响应      更新时间：2023-09-26

我想为我的网站创建一个响应式菜单，但是，我有一个问题：我有两个设备（桌面和mpbile手机），具有相同的HTML但两个不同的JS。我在几行代码中分享了我的问题。

eventDesktop = function() {
  $('header').click(function() {
    console.log('Desktop');
  });
};
eventPhone = function() {
  $('header').click(function() {
    console.log('Phone');
  });
};
eventWitch = function() {
  if (window.innerWidth > 480) {
    eventDesktop();
  } else {
    eventPhone();
  }
};
eventWitch();
$(window).resize(function() {
  eventWitch();
});
所以，加载后

没关系，因为只有一个是加载的，但是调整大小后，同一元素有 2 个元素，我只想有一个我需要的女巫。所以在这里，当我单击时，我只想在控制台上看到"桌面"或"电话"，而不是两者。

感谢您的阅读。如果您有问题，我可以指定我的问题。

迎接。

您在调整窗口大小时将两个事件绑定到同一元素上。你可以试试这个

$('header').click(function() {
 if(window.innerWidth > 480)
    console.log('Desktop');
 else
    console.log('Phone');
});

因此，每次用户单击标题时都要检查。

似乎您创建了 2 个不同的事件处理程序，因此他在您的情况下同时使用两者。

尝试.unbind()它们：

$(window).resize(function() {
    $( 'header' ).unbind( 'click' );
    eventWitch();
});

因此，所有点击事件都将被删除，请记住这一点。

还有另一种我没有尝试过的方法，但也许它有帮助：jQuery多点击事件

正如 andrea.spot 所写："你需要让你的处理程序函数返回 false。它可以防止事件冒泡。

将此添加到您的代码中：

eventDesktop = function() {
    $('header').click(function() {
        console.log('Desktop');
        return false;
    });
};
eventPhone = function() {
    $('header').click(function() {
        console.log('Phone');
        return false;
    });
};

最后的解决方案是改变思维方式。这意味着对窗口大小进行单击处理程序和 THAN 检查。目前，您检查窗口大小，而不是调用单击处理程序，这将始终导致多个单击处理程序，但如果创建一个处理程序并且执行语句，则不会。

我的文字到代码：

eventWitch = function() {
    $( 'header' ).click( function(){
        if (window.innerWidth > 480) {
            console.log( 'Desktop' );
        } else {
            console.log( 'Mobile' );
        }
    }
};

这种解决方案之一是否适合您？

试试这个 

eventDesktop = function() {
    $('header').unbind('click').click(function() {// here it will removes all old click events assigned to this element.
        console.log('Desktop');
    });
};
eventPhone = function() {
    $('header').unbind('click').click(function() {// here it will removes all old click events assigned to this element.
        console.log('Phone');
    });
};
eventWitch = function() {
    if (window.innerWidth > 480) {
        eventDesktop();
    } else {
        eventPhone();
    }
};
eventWitch();
$(window).resize(function() {
    eventWitch();
});
相关文章：