jQuery Touchwipe - 仅禁用 1 个轴的默认滚动

2024-01-21

我使用 jQuery Touchwipe 插件:http://www.netcu.de/jquery-touchwipe-iphone-ipad-library http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

使用 PreventDefaultEvents: true 可以禁用 iPhone 上的默认拖动行为。然而,我需要的是仅禁用 1 轴的默认行为。我需要用户能够拖动来上下滚动,但是需要禁用从左向右拖动,并且我的函数将会触发。谢谢


我有同样的需求,并扩展了 touchwipe 插件,将事件传递给wipeLeft、wipeRight、wipeUp 和wipeDown 回调。这允许我设置preventDefaultEvents: false在配置中,然后在需要时在我的特定回调中,做第一件事:e.preventDefault();.

我将修改发送给插件作者。

修改后的插件:

(function($) {
$.fn.touchwipe = function(settings) {
    var config = {
            min_move_x: 20,
            min_move_y: 20,
            wipeLeft: function(e) { },
            wipeRight: function(e) { },
            wipeUp: function(e) { },
            wipeDown: function(e) { },
            preventDefaultEvents: true
    };

    if (settings) $.extend(config, settings);

    this.each(function() {
        var startX;
        var startY;
        var isMoving = false;

        function cancelTouch() {
            this.removeEventListener('touchmove', onTouchMove);
            startX = null;
            isMoving = false;
        }

        function onTouchMove(e) {
            if(config.preventDefaultEvents) {
                e.preventDefault();
            }
            if(isMoving) {
                var x = e.touches[0].pageX;
                var y = e.touches[0].pageY;
                var dx = startX - x;
                var dy = startY - y;
                if(Math.abs(dx) >= config.min_move_x) {
                    cancelTouch();
                    if(dx > 0) {
                        config.wipeLeft(e);
                    }
                    else {
                        config.wipeRight(e);
                    }
                }
                else if(Math.abs(dy) >= config.min_move_y) {
                        cancelTouch();
                        if(dy > 0) {
                            config.wipeDown(e);
                        }
                        else {
                            config.wipeUp(e);
                        }
                    }
            }
        }

        function onTouchStart(e)
        {
            if (e.touches.length == 1) {
                startX = e.touches[0].pageX;
                startY = e.touches[0].pageY;
                isMoving = true;
                this.addEventListener('touchmove', onTouchMove, false);
            }
        }
        if ('ontouchstart' in document.documentElement) {
            this.addEventListener('touchstart', onTouchStart, false);
        }
    });

    return this;
};

})(jQuery);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery Touchwipe - 仅禁用 1 个轴的默认滚动 的相关文章

  • 更改时触发跨度文本/html

    jQuery 或 JavaScript 中是否有任何事件在以下情况下触发span标签 text html 已更改 Code span class user location span user location change functio
  • jQuery:如何在显示元素的同时使用高亮效果?

    我在一个页面上有两个元素 div content div div style display none different content div 当我点击当前显示的div 我想隐藏它并显示另一个 这很容易做到 a hide b show
  • 仅在首页加载时使用 cookie 加载 colorbox

    我尝试了来自网络的参考代码 仅在页面加载时加载特定元素一次 这是示例代码
  • JavaScript / jQuery 中的范围[重复]

    这个问题在这里已经有答案了 显然我写了太多的 CoffeeScript 因为我现在意识到我对纯 JS 中的作用域没有基本的了解 玩了一段时间后 我无法弄清楚以下问题 document ready function var myUrl htt
  • 正则表达式以任何顺序匹配查询中的所有单词

    我正在尝试为一个项目构建一个搜索功能 该功能根据用户搜索输入以及它是否与针对项目列出的关键字匹配来缩小项目范围 为此 我将项目关键字保存在data属性并使用 RegExp 模式将查询与这些关键字进行匹配 我目前正在使用这个表达式 我知道它不
  • jquery中文本区域自动调整大小

    我怎样才能做一个
  • JavaScript/JQuery:$(window).resize 如何在调整大小完成后触发?

    我这样使用 JQuery window resize function 然而 如果用户通过拖动窗口边缘使其更大 更小来手动调整浏览器窗口的大小 resize上面的事件会多次触发 问题 如何在浏览器窗口调整大小完成后调用函数 以便事件仅触发一
  • 两个 OnClick 事件重叠

    我在元素内有一个元素 当我单击下面的元素时 我希望打开滑块 当我单击最外面的元素时 我希望滑块关闭 不幸的是 当我单击最外面的元素时 它也会单击下面的元素 有没有办法只单击最外面的元素而忽略下面元素的单击 这些事件在单击时触发并使用 Jav
  • 在 javascript/jquery 中将光标更改为等待

    当调用函数时 如何让光标更改为此加载图标以及如何将其更改回 javascript jquery 中的普通光标 在你的 jQuery 中使用 body css cursor progress 然后又恢复正常 body css cursor d
  • 如何同步两个文本框表单值?

    大家好 我是 jQuery 新手 假设我有两个 HTML 文本框 如何才能实现这样的情况 如果我在文本框 A 中写入 则相同的值会转到文本框 B 如果我在 B 中写入 则相同的值会转到 A 与删除文本相同 在 jQuery 中如何做到这一点
  • Jquery 组合 SlideUp/Down 并单击

    我创建了两个脚本 其中一个具有向上滑动和向下滑动命令 这些命令在页面加载时作用于计时器 第二个是单击事件 其中单击链接时执行向上 向下滑动命令 这两个脚本都是单独工作的 但我无法让它们一起工作 这是定时向上 向下滑动脚本 document
  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a
  • 物化模式覆盖整个页面(模式弹出窗口未带到前台)

    由于保密原因 我无法上传 Web UI 的屏幕截图 物化模态应该表现得像here http materializecss com modals html 但不幸的是 我的网站发生的情况是 包括模式在内的整个页面都是 深色背景 的一部分 模式
  • jqgrid删除:没有获取值

    我使用 JSP 和 Servlet IDE Eclipse 数据库 Oracle10 开发 Web 应用程序 我在用JQGRID以表格格式显示数据 我还想要添加 编辑 删除的功能JQGRID 到目前为止我已经完成了编辑功能 现在我想要Del
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 如何判断 jquery 对话框是否打开? [复制]

    这个问题在这里已经有答案了 寻找通用案例解决方案来确定当前是否打开任何 jquery 对话框 有多个 试过 ui dialog content dialog isOpen true ui dialog dialog isOpen true
  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表
  • 如何在jquery中以相反的顺序迭代元素? [复制]

    这个问题在这里已经有答案了 我是jquery的新手 我想知道如何使用each 在jquery中以相反的顺序迭代表单元素 任何帮助 将不胜感激 尝试这个 input get reverse each function
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c

随机推荐