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

Question

I am trying to remove certain functionality when the screen is at certain widths. I was wondering if you could tell me why this doesn't work?

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

I remove the 'has-sub-menu' class when the screen goes below 700px but it still executes the mouseover event.

Thanks!

Answer 1

Or this.

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

try this.

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

Answer 3

You can add a function to check the screen size and remove the onmouseover event listener.

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

Answer 4

That is becauase what this is doing is.

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

This goes and finds all of the elements with the class of .has-sub-menu and then it attaches the event listener, so this listener will be applied forever, what you could do is something like this.

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

This will check to see if the element has the class every time it is clicked

Demo: http://jsbin.com/ALAYOru/6/edit

Note: in the demo, you might have to make the output window bigger than 720px and then refresh to see the proper effect.