如何在媒体查询中禁用鼠标移动悬停

Question

I'm using mousemove to generate custom image hovers for links within a text. However these images should be disabled when a certain media query is reached and should just become clickable links, without the hover image/mousemove. I tried the off() method to disable these, but I can't seem to get it working. Are there any better solutions? Thanks.

$(document).ready(function() {
    $('.text-hover').mousemove(function(e) {
        $img = $("#" + $(this).data('image-id'))
        $img.stop(1, 1).show().fadeIn("slow");
        $img.offset({
            top: e.pageY + 20,
            left: e.pageX + 10
        });
    }).mouseleave(function() {
        $img = $("#" + $(this).data('image-id'))
        $img.hide();
    });
    window.addEventListener('resize', function(){
        if(window.innerWidth > 568){
            $('html').off('mousemove');
        }
    });
});

Answer 1

You need to change the way you are adding the event listener if you use trying to remove it with .off() . According to the docs , .off() will only remove events attached with .on() .

The .off() method removes event handlers that were attached with .on().

To test, make your browser smaller and then large again. The event will be removed.

 $(document).ready(function() { $('.text-hover').on('mousemove', function(e) { // use .on() $img = $("#" + $(this).data('image-id')) $img.stop(1, 1).show().fadeIn("slow"); $img.offset({ top: e.pageY + 20, left: e.pageX + 10 }); }).mouseleave(function() { $img = $("#" + $(this).data('image-id')) $img.hide(); }); window.addEventListener('resize', function(){ console.log("resize"); console.log(window.innerWidth); if(window.innerWidth > 568){ $('.text-hover').off('mousemove'); // Remove it from the element you attached it too } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="text-hover" data-image-id="1"> Erat diam clita exerci elitr eos enim eros autem consetetur invidunt ea clita consetetur labore ea magna et consetetur ipsum justo dolor dolor at nonumy rebum eros in eirmod qui dolor odio tincidunt justo lorem labore autem ipsum aliquam invidunt est volutpat amet takimata magna ea dolor duo dolor dolor justo ipsum clita kasd nonumy diam voluptua esse lorem kasd lorem et lorem at no lorem sed sadipscing dolore diam nonumy erat sed sed sadipscing gubergren sit nonumy diam diam dolore sea dolore sed sit dolore quod nostrud erat augue sea et erat amet magna ut dolore ipsum duis dolore velit nostrud in facilisis vero diam lorem lorem qui in minim suscipit gubergren aliquyam magna amet no clita et id lorem eu autem diam erat minim diam accusam diam in labore sadipscing vulputate nibh molestie accusam ipsum dolores dolore dolor dolor esse sea nam invidunt dignissim clita in rebum luptatum elitr justo diam diam gubergren elitr kasd et labore kasd clita aliquip sed diam sed justo ea lorem augue no ut elitr zzril aliquyam ea dolor magna elitr hendrerit in justo sed takimata sed sit rebum amet sit ipsum sadipscing kasd feugiat praesent stet dolore sea voluptua aliquyam amet amet odio consectetuer vero lobortis illum amet nonumy nihil no no velit justo at in sadipscing et id gubergren clita voluptua invidunt consequat amet est lorem laoreet no clita lorem laoreet takimata nulla et sed tempor est et accusam lorem labore voluptua ut elitr consetetur sanctus et facilisi voluptua consetetur gubergren praesent diam lorem tincidunt stet voluptua ipsum esse ut no at voluptua ea invidunt amet in consetetur et ipsum odio in eos ut sed vel sit dolor dolor ipsum mazim rebum et ut eirmod et feugiat sanctus invidunt erat duis justo imperdiet et diam feugait et suscipit sanctus consetetur rebum dolore tincidunt eos tation vulputate at consetetur nostrud eirmod clita ea molestie diam stet consetetur kasd eros quis et ipsum iusto takimata lorem eirmod sit amet accusam sit vulputate tempor ea invidunt sed dolores amet no sed dolore magna diam sanctus veniam eos et amet ipsum sanctus dolor amet lorem sanctus amet nonumy quis nostrud vero qui ut liber elitr labore ipsum eos volutpat ut ipsum consetetur nonumy sit cum dolor aliquyam diam nonumy dolor takimata id esse accusam praesent et consequat amet diam dolore et dolor feugiat at accusam nonumy vero sed sed eirmod sea in iriure wisi accusam voluptua dolores dolor feugait dolor at est amet augue soluta erat dolor consectetuer eirmod ut volutpat ipsum blandit sed dolor sit duis rebum aliquyam facilisis kasd vulputate clita dolor velit duo ipsum lorem amet dolor et elit no at tempor ea dolor ipsum elitr elitr elitr elitr ipsum facilisis invidunt sadipscing eirmod est iusto et vel lorem eos amet invidunt invidunt elitr ipsum nonumy dolor aliquyam in eu wisi erat invidunt nonumy sit ut duis aliquam consetetur sanctus magna molestie justo iusto est duis amet amet minim ea commodo sadipscing et dolore ad accusam duo justo lorem ipsum nonumy amet </div> <img id="1" src="https://avatars3.githubusercontent.com/u/12504876?v=4" style="width:50px;height:50px">