在 Twitter Bootstrap 中使用点击事件

Posted 2023-05-09

【中文标题】在 Twitter Bootstrap 中使用点击事件

【英文标题】：Using tap events with Twitter Bootstrap

【发布时间】：2012-08-26 06:09:57

【问题描述】：

我正在使用 twitter-bootstrap 开发一个可以在多个设备上呈现的 Web 应用程序。

现在我想处理“点击”事件。所以我的问题是：

我可以在不使用 jqueryMobile 的情况下使用 jquery 1.7.2 处理“tap”事件吗？ 如果上述问题的答案是否定的，那么如何将 jqueryMobile 与 twitter-bootstrap 集成。因为我尝试在我的 twitter-bootstrap 页面中包含 jQueryMobile js，但当我使用它时，页面会中断！

【问题讨论】：

你能贴出你损坏的代码吗？

【参考方案1】：

tap 事件是一个 jQuery Mobile 事件，并不是一个具有规范的实际 html5 事件。 HTML5 specifies touch events，即supported on android and ios，Twitter Bootstrap 已经在其一些插件中使用了这些事件。

但是，根据点击事件可能是什么的常识概念，可以根据一系列触摸事件轻松触发它们。试试看：

// listen for a touchstart event
$('body').on('touchstart.tap',function (e) 

  // listen for a touchend event
  $(e.target).one('touchend.tap',function() 
    $(e.target).trigger('tap');
  );

  // cancel it in 150ms
  setTimeout(function () 
    $(e.target).off('touchend.tap');
  ,150);
);

如果 touchend 在 150 毫秒内跟随 touchstart（当然您可以调整），这将触发 tap 事件。如果您只需要 tap 事件，您可以尝试使用它来代替包含 jQuery mobile。

【参考方案2】：

我终于找到了处理触摸及其相应鼠标事件的Touchable-jQuery-Plugin。