jQuery TouchSwipe 插件不适用于链接?

2024-03-27

我正在使用 jQuery TouchSwipe 插件。它在 div 上工作得很好,但在链接上根本不起作用。

我想要它,因此如果您点击或单击链接,您将获得默认的链接行为。但是如果你滑动,我希望 javascript 滑动能够像元素是 div 一样触发。

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin https://github.com/mattbryson/TouchSwipe-Jquery-Plugin


多么美妙的问题啊。为了给你解决这个问题,我进入了源代码。你应该知道锚点滑动是disabled默认情况下。

版本:1.5.0 - 添加了 exceptedElements,这是一个 jquery 选择器,用于指定不触发滑动的子元素。默认情况下,这是一个删除所有表单、输入选择、按钮和锚元素 (source https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/blob/master/jquery.touchSwipe.js).

默认值:

excludedElements:"label, button, input, select, textarea, a, .noSwipe"

只需传入excludedElements没有锚标记的选项可以在链接上进行滑动:

$("a").swipe({
  // Generic swipe handler for all directions
  swipe: function(event, direction) {
    $(this).text("You swiped " + direction);
  },
  excludedElements: "label, button, input, select, textarea, .noSwipe"
});

这个谜题还有一个关键。你一定不能设置threshold: 0在内部,这将禁用所有点击/单击事件。放threshold任何高于 0 的值,或完全忽略它。如果你成功了threshold: 1,它只允许非常静止的鼠标点击,否则滑动将被解释。

我希望这就是您正在寻找的。


演示 1 - 手指/鼠标抬起后检测到滑动

$(function() {
  // Enable swiping...
  $(".test").swipe({
    // Generic swipe handler for all directions
    swipe: function(event, direction) {
      $(this).text("You swiped " + direction);
    },
    excludedElements: "label, button, input, select, textarea, .noSwipe",
    threshold:1
  });

  // Stackoverflow disables snippets opening links, so this captures clicks for a demo
  $(".test").on("click", function(e){
    alert($(this)[0].nodeName + " was clicked");
  });
});
.test {font-size: 48px;}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script><a href="http://google.com" target="_blank" class="test">Please swipe me</a><br><br><div class="test">Please swipe me</div>

演示 2 - 在达到阈值后检测到滑动

此版本将在手指/鼠标扫过后检测滑动threshold pixels before松开手指/鼠标。此方法的工作原理是检测滑动并设置一些data在由第一个单击处理程序读取的链接中,然后该处理程序会阻止one点击事件传播。

The .on("click", function(event) {handler 必须是 jQuery 事件链中的第一个处理程序,因此将所有这些代码放在页面顶部附近,最好就在 jQuery 加载位置的下方。

$(function() {
  $(".test").swipe({
    swipe: function(event, direction) {
      $(this).text("You swiped " + direction);
    },
    swipeStatus: function(event, phase) {
      var $this = $(this);
      $this.data("stopclick", true); // Signal a temporarily click block
      if(phase === $.fn.swipe.phases.PHASE_CANCEL) {
        // Swipe was canceled, so unblock click handers
        $this.data("stopclick", false);
      }
    },
    excludedElements: "label, button, input, select, textarea, .noSwipe",
    threshold:10,
    triggerOnTouchEnd: false
  })
  .on("click", function(event) {
    // Prevent click event propogation for one click 
    var $this = $(this);
    if($this.data("stopclick") === true) {
       event.stopImmediatePropagation();
       event.preventDefault();
       $this.data("stopclick", false); // Restore click propogation
    }
  });
  
  // Stackoverflow disables snippets opening links, so this captures clicks for a demo
  $(".test").on("click", function(e){
    alert($(this)[0].nodeName + " was clicked");
  });
});
.test {font-size: 48px;}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script><a href="http://google.com" target="_blank" class="test">Please swipe me</a><br><br><div class="test">Please swipe me</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery TouchSwipe 插件不适用于链接? 的相关文章

  • Javascript 使事件点击和语音识别与多个按钮一起工作

    所以我正在使用 webkitSpeechRecognition 并且它工作得很好 但问题是我想同时在多个地方使用它 当我将它添加到页面上的另一个部分时 它无法正常工作 这是它自己工作的情况 var final transcript var
  • HTML5 仅拖放图像

    我想做的是 如果所有拖动的文件都是图像 则将其删除 但如果有其他文件扩展名 则不要删除它们 而仅删除图像 这是我的尝试 HTML div div JavaScript var dropzone document getElementById
  • jquery中如何使用load函数发送数据

    我想用 jquery load 函数发送字符串数据 但它没有发送 我的代码是 function dialog data function alert data var ph Org1 ph empty ph load FrontEnd Do
  • 自定义 jQuery 验证 .addMethod

    我有一个表单 可以根据最小 最大长度验证邮政编码 我需要将所有国家 地区的邮政编码最小设置为 5 位数字 澳大利亚除外 澳大利亚需要为 4 位数字 这是我遇到的问题 validator addMethod AusZip function v
  • MailTo 从 Javascript

    我有一个链接按钮 用于从页面内容构建邮件 从 javascript 启动它而不打开空白窗口或干扰调用它的窗口的最佳方法是什么 function Email var sMailTo mailto var sBody var alSelecte
  • 在 jQuery .live() 方法中模拟“焦点”和“模糊”

    Update 从 jQuery 1 4 开始 live 现在支持focusin and focusout events jQuery http www jquery com currently1 doesn t support blur o
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 我怎样才能让这个脚本在 WordPress 上运行?

    我有这个脚本 document ready function text1 click function this hide 代码html div class div1 p class text1 text to appear when th
  • jQuery 表格排序

    我有一个非常简单的 HTML 表格 有 4 列 Facility Name Phone City Specialty 我希望用户能够排序设备名称 and City only 我如何使用 jQuery 进行编码 我发现了这个 我想我应该投入
  • 如何禁用 body 元素的滚动?

    如何禁用正文滚动 body css overflow hidden 仅隐藏滚动条 但不会禁用滚动 我想禁用正文的滚动 但我想保持其他分区的滚动完好无损 试试这个 CSS 不需要 jQuery 评论后更新 尝试指定高度body too
  • 在 JQuery 中发布表单并填充 DIV - 在 IE 中损坏

    我正在尝试创建一个通过 jQuery 发布数据并将返回值填充到同一 DIV 中的表单 这样页面就不会在发布操作时刷新 div div
  • jQuery UI 自动完成的“源”回调中的“响应”和“请求”参数是什么?

    我正在查看自动完成教程 我有几个问题 http jqueryui com demos autocomplete option disabled http jqueryui com demos autocomplete option disa
  • jQuery 变量在定义时声称它是未定义的

    我试图在同一页面上有两个自动填充文本框 一个用于手机型号 input1 一个用于固件 input2 当两者都填充时 我希望显示一个带有ID input1input2 的div 但是当在input1 中输入值时 它声称phone 的变量未定义
  • 如何按多个项目搜索/过滤列表?

    我正在寻找一个示例 或者可能是一个关于通过在文本框中输入的多个项目来过滤 搜索项目列表的方法的一点提示 假设我有一个列表 ul li Coffee li li Tea li li Milk li li Water li li Juice l
  • 实现悬停信息框

    我有一个日历 当用户将鼠标悬停在单元格上时 会出现一个很大的信息框 其中包含该日期的详细信息 虽然当用户离开时使信息框消失 但我遇到了一些麻烦 我基本上想要它 这样当鼠标光标移出信息框隐藏的日历单元格时 它就会消失 但我遇到了麻烦 因为mo
  • 在多个动态添加的表单上初始化 jQuery validate() 函数

    有人建议最好初始化一个 form validate 在页面加载而不是点击事件上运行 jquery form validate 插件仅允许在输入更改时提交 https stackoverflow com questions 10984196
  • jQuery 中的 $('') 与 $('')

    我看到人们以两种不同的方式在 jQuery 中创建 HTML 元素
  • 发送 POST 请求时 JSON 原语无效

    我有以下 ajax 请求 其中我尝试将 JSON 对象发送到服务器 function sendData subscriptionJson ajax type POST url Url Action SubscribeSecurities S
  • Django 将 JSON 数据传递给静态 getJSON/Javascript

    我正在尝试从 models py 中获取数据并将其序列化为views py 中的 JSON 对象 模型 py class Platform models Model platformtype models CharField max len
  • 用javascript调用外部网页(跨域)

    我正在尝试使用以下网络服务来验证提要这个问题 https stackoverflow com questions 11996430 check if a url is a valid feed 但浏览器不允许我向另一台服务器发送 ajax

随机推荐

  • 使用 Google Pretify 显示 HTML

    为了让 Google Prettify 正确显示 HTML 代码示例 您应该替换所有 lt with lt 和所有的 gt with gt 如何仅使用 JavaScript 来自动化该过程 如果您将代码放入
  • 使用 Oracle SQL Developer 查询两个数据库

    有没有办法在 Oracle SQL Developer 中查询两个数据库 在单个查询中 我对 Oracle 不太熟悉 无论如何 除了标准的 CRUD 语法 我正在尝试从 SQL Server 表插入 Oracle 表 想做这样的事情 INS
  • 使用 CSS 显示徽标的正确方法是什么?

    我最近一直在学习CSS 我正在观看的教程系列说显示徽标图像的最佳方法是将文本包装在H1标签中 然后将该标签的CSS样式设置为背景图像 并带有文本缩进 99999 或类似的大数字 这看起来非常粗俗和不优雅 对于 SEO 目的来说 使用 CSS
  • 如何检查 NSString 是否包含数字值?

    我有一个从公式生成的字符串 但是我只想使用该字符串 只要它的所有字符都是数字 如果不是 我想做一些不同的事情 例如显示错误消息 我一直在环顾四周 但发现很难找到任何符合我想做的事情 我看过 NSScanner 但我不确定它是否检查整个字符串
  • 在python中将字节转换为文件对象

    我有一个小应用程序 它使用以下方式读取本地文件 open diefile path r as csv file open diefile path r as file and also uses linecache module 我需要将用
  • Angular2 查询参数订阅触发两次

    尝试处理 OAuth 登录场景 其中如果用户登陆页面authorization code在查询字符串中 我们处理令牌并继续or如果他们在没有该令牌的情况下登陆页面 我们会检查本地存储中是否存在现有令牌 确保其仍然有效 并根据其有效性重定向到
  • requestAccessToEntity iOS6-向后兼容性-EKEventStore

    遵循 iOS6 eventKit 和新的隐私设置 我使用以下代码 它在 iOS6 设备上运行得很好 不过 我希望相同的代码也适用于 iOS 5 x 的设备 并且我希望不要编写 相同的代码 两次 似乎是错误的 任何人都可以协助优雅的解决方案
  • 使用 Tailwind CSS 创建包含文本的水平线 (HR) 分隔线

    我想创建一个 hr 使用 Tailwind CSS 进行分隔 但我想在中间添加一些文本 而不是跨越整个页面宽度的水平线 例如 Continue 我在文档中找不到类似的内容 我怎样才能达到这个效果 如有必要 我可以将 HTML 更改为除 hr
  • spring,如何更改cglib命名策略

    当spring创建代理时 它使用带有默认命名策略的cglib 有什么办法可以改变命名策略吗 生成的类名与我使用的另一个框架冲突 好像是cglibclaims http cglib sourceforge net apidocs net sf
  • 在给定总数、部分数和最大被加数的情况下查找整数分区的数量

    我正在寻找总共 N 个整数分区的数量 其中多个部分为 S 最大部分恰好为 X 而无需枚举所有分区 例如 所有 100 的分区都有 10 个部分 最大部分为 42 我没有找到解决这个问题的定理或分区恒等式 我怀疑这是一个不平凡的问题 不容易从
  • FCM 获取 MismatchSenderId

    我有一个使用 Google FCM 发送推送通知的应用程序 当我向一组用户发送推送通知时 我得到的响应是MismatchSenderId对于其中一些人来说 尽管如此 所有用户都拥有完全相同的应用程序 如何某些用户获得成功响应 而其他用户获得
  • iphone如何通过Xcode拍照后进入图片库

    大家好 我正在实施以下代码来通过我的应用程序拍照 UIApplication sharedApplication keyWindow setRootViewController picker picker sourceType UIImag
  • 找不到模块 create-react-app/script/start.js

    我的程序结构发生了一些变化 由于其复杂性 我无法准确指出问题所在 自从我的应用程序崩溃并且不再工作以来 我尝试了不同的方法 例如删除节点模块包并重新安装它们 但仍然无法工作 每当我尝试跑步时npm 启动我收到以下错误 below is my
  • 使用密码保护关闭的工作簿

    我已经搜索过 但没有找到在关闭的工作簿上添加外部密码的方法 假设我已经关闭了名为 Sample xlm 的工作簿 并且我正在打开一个名为 Test xlm 的工作簿 是否有代码可以让我在 Sample xlsm 上设置密码 我的意思是外部密
  • 空状态页面和导航器问题?

    我想实施空状态页 https material io design communication empty states html content在 Flutter 应用程序中 当新闻源为空时 当提要中没有活动时 我想显示 没有活动 当数据
  • 如何将服务变量与组件 Angular 2 绑定?

    我有一个变量 public tick number 在服务中 该服务注入了另一个服务计时器 它的启动方式如下 class Service constructor public timer TimerService public sendSm
  • Python 和类似字典的对象

    我需要一个用于字典的 python 3 1 深度更新函数 该函数将递归更新父字典内的子字典 但我认为 将来 我的函数可能必须处理行为类似于字典但实际上并非如此的对象 此外我想避免使用isinstance and type 因为它们被认为是不
  • 无法运行 React-Native UIExplorer 示例项目

    我一直在尝试在 Windows 上运行 UIExplorer 项目 我收到以下错误 make D react native ReactAndroid build tmp buildReactNdkLib local armeabi v7a
  • Gunicorn + nginx:通过套接字还是代理服务器?

    我见过两种使用 Gunicorn 和 nginx 托管 django 应用程序的策略 一种策略是在网络端口上运行 Gunicorn 例如 来自goodcode https goodcode io articles django nginx
  • jQuery TouchSwipe 插件不适用于链接?

    我正在使用 jQuery TouchSwipe 插件 它在 div 上工作得很好 但在链接上根本不起作用 我想要它 因此如果您点击或单击链接 您将获得默认的链接行为 但是如果你滑动 我希望 javascript 滑动能够像元素是 div 一