Question

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

当屏幕低于700px但我仍然执行鼠标悬停事件时，我会删除'has-sub-menu'类。

谢谢！

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

注意：在演示中，您可能必须使输出窗口大于720px，然后刷新才能看到正确的效果。

在特定屏幕宽度下删除JS功能

4 个答案: