Keydown 触发的次数越来越多

我打

我正在建立一个画廊,但我遇到了该keydown事件的错误(奇怪的是仅在 Windows 上,而不是在使用相同浏览器的 Mac 上)。

当我单击拇指时,幻灯片将打开并且图像已准备好可供查看。我还启用了通过箭头键滑动的图像。奇怪的是,如果我关闭幻灯片 div 并重新打开它(没有任何页面刷新),如果我尝试使用键盘箭头导航,它将从两个图像跳到两个图像(1-3-5-7 等) .) 并且“跳过数字”随着我关闭并再次打开幻灯片而增加。

我用来通过键盘按键浏览图像的功能与单击“屏幕箭头”时使用的功能相同,但在第二种情况下,一切正常。这就像 keydown 事件是否有缓存或类似的东西。

这是整个imgBrowsing()功能:

var imgBrowsing = function () {
    function prevNext(move) {
        /*
         * @move    { string: "prev" / "next" }
         */
        var prevCurrNext_obj = {
            'venus-img-wrap-prev':      $('.venus-img-wrap-prev'),
            'venus-img-wrap-current':   $('.venus-img-wrap-current'),
            'venus-img-wrap-next':      $('.venus-img-wrap-next')
        };

        if (move == "prev") {
            /* ***** Current img id re-definition ***** */
            (current_img_id >= 1)
                ? --current_img_id
                : current_img_id = images_length - 1;

            /* ***** PREV-CURRENT-NEXT classes re-attribution ***** */
            $.each(prevCurrNext_obj, function (class_name, jQuery_obj) {
                var b;
                (jQuery_obj.prev(venusImgWrap).length)
                    ? b = jQuery_obj.prev(venusImgWrap)
                    : b = $(venusImgWrap).last();
                b.addClass(class_name);
                jQuery_obj.removeClass(class_name);
            });
        } else if (move == "next") {
            /* ***** Current img id re-definition ***** */
            (current_img_id + 1 < images_length)
                ? ++current_img_id
                : current_img_id = 0;                           // = the first element inside the array-object 'images'
            /* ***** PREV-CURRENT-NEXT classes re-attribution ***** */
            $.each(prevCurrNext_obj, function (class_name, jQuery_obj) {
                var b;
                (jQuery_obj.next(venusImgWrap).length)
                    ? b = jQuery_obj.next(venusImgWrap)
                    : b = $(venusImgWrap).first();
                b.addClass(class_name);
                jQuery_obj.removeClass(class_name);
            });
        }

        venusDivFilling();
    }

    /* ***** KEYDOWN pression event ***** */
    $(document).on("keydown", function (e) {
        switch (e.which) {
            case 39:            // right
                prevNext("next");
                break;
            case 37:            // left
                prevNext("prev");
                break;
            case 27:            // ESC
                venusDivRemove();
                break;

            default: return;    // exits this handler for other keys
        }
        e.preventDefault();     // prevents the default action (scroll / move caret)
    });

    /* ***** ARROWS click event ***** */
    $(venusImgBrowse).click(function () {
        prevNext($(this).data('venus-direction'));
    });

    /* ***** SWIPE event ***** */
};
艾丽西亚

那是因为每次打开图像查看器时 keydown 都会绑定到 body。

如果您在图像 div 关闭时从 body 解除 keydown 的绑定,那么您将不再遇到此问题。

$("body").unbind().on("keydown")

[编辑] 正如官方文档所说:从 jQuery 3.0 开始,.unbind()已被弃用。自 jQuery 1.7 起,它被.off()方法取代,因此已经不鼓励使用它。

$(document).off('keydown');

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

相同的活动越来越多

来自分类Dev

计算越来越多的矩阵的乘积

来自分类Dev

相同的活动越来越多

来自分类Dev

越来越多地满足特定条件的次数(R)

来自分类Dev

页面加载中的DIV越来越多?

来自分类Dev

vtk使用越来越多的内存,并且变慢。

来自分类Dev

越来越多的雪花:优化几何变换

来自分类Dev

带有textview或label的越来越多的按钮

来自分类Dev

在QTableView / QTableWidgets中添加越来越多的小部件

来自分类Dev

如何越来越多地迭代多个迭代器?

来自分类Dev

硬盘非常慢,出现越来越多的错误

来自分类Dev

越来越多的雪花:优化几何变换

来自分类Dev

如何存储越来越多的视频集?

来自分类Dev

jQuery Mobile代码产生越来越多的行

来自分类Dev

服务使用越来越多的内存

来自分类Dev

图像从顶部到底部的位置越来越多

来自分类Dev

Virtualbox 机器需要越来越多的内存

来自分类Dev

如何每行打印越来越多的数组元素

来自分类Dev

如何在 Matlab 中为数组中越来越多的邻居添加越来越多的值?

来自分类Dev

Keydown事件未触发

来自分类Dev

越来越多的列数使PHP中的数据表失败

来自分类Dev

是否连续两次调用getrusage会产生越来越多的结果?

来自分类Dev

“ asia-east1- [abc]”区域越来越多地耗尽资源

来自分类Dev

为什么tomcat在空闲期间会使用越来越多的堆空间?

来自分类Dev

Android Studio-旋转设备导致越来越多的内存被使用

来自分类Dev

在C ++中分割字符串花费的时间越来越多,而行的长度大致相似

来自分类Dev

在GCP Memorystore上越来越多的“ del”调用。但无法确定其来源

来自分类Dev

可能快照机制在Apache Flink中花费越来越多的内存

来自分类Dev

越来越多的无限循环错误和不确定的原因

Related 相关文章

  1. 1

    相同的活动越来越多

  2. 2

    计算越来越多的矩阵的乘积

  3. 3

    相同的活动越来越多

  4. 4

    越来越多地满足特定条件的次数(R)

  5. 5

    页面加载中的DIV越来越多?

  6. 6

    vtk使用越来越多的内存,并且变慢。

  7. 7

    越来越多的雪花:优化几何变换

  8. 8

    带有textview或label的越来越多的按钮

  9. 9

    在QTableView / QTableWidgets中添加越来越多的小部件

  10. 10

    如何越来越多地迭代多个迭代器?

  11. 11

    硬盘非常慢,出现越来越多的错误

  12. 12

    越来越多的雪花:优化几何变换

  13. 13

    如何存储越来越多的视频集?

  14. 14

    jQuery Mobile代码产生越来越多的行

  15. 15

    服务使用越来越多的内存

  16. 16

    图像从顶部到底部的位置越来越多

  17. 17

    Virtualbox 机器需要越来越多的内存

  18. 18

    如何每行打印越来越多的数组元素

  19. 19

    如何在 Matlab 中为数组中越来越多的邻居添加越来越多的值?

  20. 20

    Keydown事件未触发

  21. 21

    越来越多的列数使PHP中的数据表失败

  22. 22

    是否连续两次调用getrusage会产生越来越多的结果?

  23. 23

    “ asia-east1- [abc]”区域越来越多地耗尽资源

  24. 24

    为什么tomcat在空闲期间会使用越来越多的堆空间?

  25. 25

    Android Studio-旋转设备导致越来越多的内存被使用

  26. 26

    在C ++中分割字符串花费的时间越来越多,而行的长度大致相似

  27. 27

    在GCP Memorystore上越来越多的“ del”调用。但无法确定其来源

  28. 28

    可能快照机制在Apache Flink中花费越来越多的内存

  29. 29

    越来越多的无限循环错误和不确定的原因

热门标签

归档