javascript - 特定の画面幅で JS 関数を削除する

Question

画面が特定の幅のときに特定の機能を削除しようとしています。なぜこれがうまくいかないのか教えていただけないでしょうか？

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

画面が 700 ピクセルを下回ったときに「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

それは、これがしていることだからです。

$(".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 ピクセルより大きくしてから更新する必要がある場合があります。

Answer 3

画面サイズをチェックする関数を追加し、onmouseover イベント リスナーを削除できます。

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

Answer 4

これを試して。

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