如何绑定“touchstart”和“click”事件但不响应两者?

2024-01-04

我正在开发一个必须在各种设备上运行的移动网站。目前最让我头疼的是黑莓手机。

我们需要支持键盘点击和触摸事件。

理想情况下我只使用:

$thing.click(function(){...})

但我们遇到的问题是,其中一些黑莓设备从触摸到触发点击之间存在非常烦人的延迟。

补救措施是改用 touchstart:

$thing.bind('touchstart', function(event){...})

但是我该如何绑定这两个事件,但只触发一个呢?我仍然需要键盘设备的单击事件,但是当然,如​​果我使用触摸设备,则不希望触发单击事件。

一个额外的问题:有没有办法做到这一点,并另外适应甚至没有 touchstart 事件的浏览器?在研究中发现,BlackBerry OS5 似乎不支持 touchstart,因此还需要依赖该浏览器的单击事件。

附录:

也许更全面的问题是:

使用 jQuery,是否可以/建议使用相同的绑定来处理触摸交互和鼠标交互?

理想情况下,答案是肯定的。如果没有,我还有一些选择:

  1. 我们使用 WURFL 获取设备信息,以便创建我们自己的设备矩阵。根据设备的不同,我们将使用 touchstart 或 click。

  2. 通过 JS 检测浏览器中的触摸支持(我需要对此进行更多研究,但这似乎是可行的)。

然而,这仍然留下一个问题:支持两者的设备怎么样。我们支持的一些手机(即诺基亚和黑莓)都有触摸屏and键盘。所以这让我回到了最初的问题……有没有办法以某种方式同时允许两者?


Update:查看 jQuery指针事件 Polyfill https://github.com/jquery/PEP项目允许您绑定到“指针”事件,而不是在鼠标和触摸之间进行选择。


绑定到两者,但创建一个标志,以便该函数仅每 100 毫秒左右触发一次。

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

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

如何绑定“touchstart”和“click”事件但不响应两者? 的相关文章

  • Rails 4 使用 ajax、jquery、:remote => true 和 respond_to 渲染部分

    使用 AJAX 动态渲染页面以响应提交的表单似乎很常见 其他类似的问题都没有集中于如何以一般方式做到这一点 我能找到的关于这个主题的最好的博客文章在这里 http www gotealeaf com blog the detailed gu
  • 以一定时间间隔连续重复运行 JavaScript 函数

    这是我的第一个问题 希望您尽快回答 我想要代码连续重复一个函数 我尝试了一些代码 但没有成功 我尝试了这段代码 我想在一段时间后重复这个功能 我努力了setInterval and setTimeout 但是 我还没有收到结果 这将重复该任
  • 确定元素是在页面折叠上方还是下方

    我有一些页面有多个输入框 用户可以在其中输入文本 在单击 下一步 按钮之前 需要填写其中一些内容 我弹出验证错误供用户查看 但是如果问题不在页面上 我希望页面滚动到它 而不是他们必须搜索丢失 错误的字段 我有一个滚动到位 但我无法确定要滚动
  • jQuery 从选择选项切换 div

    我需要从下拉选择选项框中切换 div 我想要它类似于汇编选择 http www ryancramer com projects asmselect examples example1 html对于 jquery 但我不想列出选项标签 而是希
  • 淘汰赛绑定,每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div
  • jQuery - 系列之外的 HighCharts 标签(条形图)

    function container highcharts chart type bar backgroundColor null width 360 title text null style display none subtitle
  • 当播放器隐藏 div 时停止 JWPlayer

    我有一个网站 我正在使用 JavaScript 添加或删除 css 类 使用此方法 我可以根据需要隐藏或显示 div 效果很好 问题是 当我隐藏 窗口 或更准确地说 div 时 一个 div 使用 JWplayer 打开视频 声音仍在播放
  • jQuery 或 Javascript - 如何禁用窗口滚动而不溢出:隐藏;

    您好 是否可以在不使用的情况下禁用窗口滚动overflow hidden 当我悬停一个元素时 我试过 chat content on mouseenter function document scroll function e if e h
  • Jquery 移动应用程序的奇怪行为

    我创建了一个应用程序 其中包含多个主页按钮 单击其中一个按钮 我的应用程序将重定向到某个视图 其中包含 JQM 表单 JQM 日历 文本字段 按钮和数据库等 我的问题是 当我在 Android 设备上测试我的应用程序时 即使我没有使用任何图
  • jQuery:在动画期间禁用单击

    所以我正在做一个小测验 我想禁用里面所有内容的点击 qWrap当动画运行时 从而防止垃圾点击 我尝试使用 is animated 但没有效果 有任何想法吗 HTML div ul li class qContainer ul class q
  • jquery上传完成后重定向到新页面

    我正在尝试让这个 jquery 工具与我的网站一起使用以进行文件上传 https github com blueimp jQuery File Upload https github com blueimp jQuery File Uplo
  • Arbor Js - 节点 Onclick?

    我在用着arbor js http arborjs org 创建图表 我如何创建一个onclick节点的事件 或者在单击时在某处创建节点链接 Arborjs org 主页的节点在单击时链接到外部页面 我如何复制它 或者使节点在单击时调用 j
  • 如何使用 jQuery 进行同步请求?

    为什么不返回该函数的responseText function LoadBookmarksAsXml return ajax type GET async false url http www google com bookmarks ou
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • 当覆盖设置为 null 时,通过外部单击关闭 fancybox

    我正在使用 fancybox 2 1 4 插件 它工作得很好 但我有一个问题 我想将覆盖设置为空 并且当用户单击 fancybox 容器外部 时关闭 fancybox 我已经尝试过以下代码 但它不起作用 因为没有可供单击的覆盖层 fancy
  • 如何判断一个网页是否支持jquery?

    确定网页是否启用 jquery 的最佳方法是什么 如果这是确定它的最佳方法 则使用 jquery 本身 if jQuery jquery object exists jQuery 并不神奇 它本质上只是一个大对象 您可以像检查任何其他对象一
  • 使用 jQuery Select2 清除下拉菜单

    我正在尝试使用奇妙的方式以编程方式清除下拉菜单Select2 http ivaynberg github com select2 图书馆 使用 Select2 远程 ajax 调用动态填充下拉列表query option HTML
  • jquery 插件“uploadify”-从上传脚本返回响应的方法?

    我的标题代码 document ready function sampleFile uploadify uploader include uploadify uploadify swf script add list php scriptD
  • 在 JQuery 中发布表单并填充 DIV - 在 IE 中损坏

    我正在尝试创建一个通过 jQuery 发布数据并将返回值填充到同一 DIV 中的表单 这样页面就不会在发布操作时刷新 div div
  • JQuery:将 FormData 和 csrf 令牌一起发布

    Is the data 下面的行正确吗 我想将表单数据和 csrf 令牌发布到 Django 视图函数 file upload on change function var currentpath window location pathn

随机推荐