Question

我正在使用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');
        }
    });
});

Answer 1

如果尝试使用.off()删除事件侦听器，则需要更改添加事件侦听器的方式。根据{{3}}，.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">

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

1 个答案: