javascript - 移除特定屏幕宽度的 JS 函数

Question

当屏幕处于特定宽度时，我试图删除某些功能。我想知道你能不能告诉我为什么这不起作用？

http://jsbin.com/ALAYOru/1/edit

当屏幕低于 700 像素时，我删除了“has-sub-menu”类，但它仍然执行 mouseover 事件。

谢谢！

Answer 1

或这个。

function isWindowSmall()
{
  if(window.innerWidth < 700px) return true;
  else return false;
}




$(".some-btn").on('click',function()
{
  if(isWindowSmall()){
  //do something for small windows
}
else{
  //do something else for big windows
}
});

Answer 2

尝试这个。

window.onresize = function () {
    if(window.innerWidth < 700) {
        // your code here
    }
}

Answer 3

您可以添加一个函数来检查屏幕大小并删除 onmouseover 事件侦听器。

function check_screen() {
if(window.innerWidth < 700px) 
{
whateveryourelementiscalled.removeEventListner('onmouseover', //whatever your mouseover function was);
}
} 

Answer 4

那是因为这是在做什么。

$(".has-sub-menu").mouseenter(function(){
   $(this).css('background-color','red');
}).mouseleave(function(){
   $(this).css('background-color','transparent');
});

这会找到类的所有元素，.has-sub-menu然后附加事件监听器，所以这个监听器将永远应用，你可以做的是这样的事情。

$("body").on({
  mouseenter: function(){
     $(this).css('background-color','red');
  },
  mouseleave: function(){
     $(this).css('background-color','transparent');
  }
}, '.has-sub-menu');

这将在每次单击元素时检查元素是否具有类

演示：http: //jsbin.com/ALAYOru/6/edit

注意：在演示中，您可能需要将输出窗口设置为大于 720 像素，然后刷新才能看到正确的效果。