Tell me how to disable the event when the screen is reduced? Mouseover and mouseleave events

2 answers 2

Use the screen.width property:

 if (screen.width > 320) { ... }

    It is necessary in the resize event handler for window compare the current width (or height, or both) with the minimum acceptable values ​​for activating the mouseover and mouseleave event handlers.
    If the width is less than the required one and there are handlers, then we remove the handlers.
    If the width is larger than the required one and there are no handlers, then add handlers.

    Sample code to show ideas:

     var minWidth = 200; var active = false; var $block = $('#block'); function onResize() { var width = $(window).width(); if (width > minWidth && !active) { $block.on("mouseover", function() { $block.css("background-color", "green"); }); $block.on("mouseleave", function() { $block.css("background-color", "white"); }); active = true; } else if (width < minWidth && active) { $block.off("mouseover mouseleave"); active = false; } } $(window).on("resize", onResize); onResize(); 
     div { width: 200px; height: 200px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="block">block</div>

    • Thanks, but I figured it out yesterday) I'll take your note on the note)) - Sergey Glazov