时间戳

首页 > 解决方案 > 如何在媒体查询中禁用鼠标移动悬停

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

问题描述

我正在使用 mousemove 为文本中的链接生成自定义图像悬停。然而，当达到某个媒体查询时，这些图像应该被禁用，并且应该只是成为可点击的链接，没有悬停图像/鼠标移动。我尝试了 off() 方法来禁用这些，但我似乎无法让它工作。有没有更好的解决方案？谢谢。

$(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');
        }
    });
});

标签： javascripthovermousemove

解决方案

如果您尝试使用删除事件侦听器，则需要更改添加事件侦听器的方式.off()。根据文档，.off()只会删除附加的事件.on()。

.off() 方法删除了使用 .on() 附加的事件处理程序。

要进行测试，请将您的浏览器变小，然后再变大。该事件将被删除。

$(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">

推荐阅读