Mac上Webkit中手势的Javascript事件？答案

【问题标题】：Javascript events for gestures in Webkit on Mac?Mac上Webkit中手势的Javascript事件？
【发布时间】：2011-01-21 05:57:42
【问题描述】：

是否可以在 Mac 桌面上的 Webkit 上以 Javascript 获取手势事件，例如 3 指向后滑动？我做了一些谷歌搜索，找不到任何东西。否则，我想我可以将它们从 Cocoa 传递到 WebView。我对 3 指向后滑动特别感兴趣。

编辑

似乎即使在我的 Macbook Pro 上最新的 Webkit 夜间活动中的 Sencha Touch Kitchen Sink app 中，也没有检测到滑动事件。但是，对于我来说，有一个更简单的解决方案，即在使用 Backbone.js 历史插件进行部分 Ajax 样式页面更新（呃，不敢相信我没有想到这一点）时简单地使用浏览器历史状态，以便用户可以去使用浏览器返回按钮或 3 指轻扫返回。

【问题讨论】：

不，我确定它与 iPhone API 相同。酷炫的多点触控显示屏。

标签： javascript macos webkit

【解决方案1】：

Webkit 暂时不兼容触摸 API。

如果您想知道是否支持触摸事件 api，您可以使用 modernizr 并根据结果修改您的 UI ...

在这里下载它：http://www.modernizr.com/ 然后写这样的东西：

if (Modernizr.touch){
  // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
  // bind to normal click, mousemove, etc
}

Modernizr 还可以自定义您的 body 元素的类，以便您可以使用 CSS 访问它

你可以用 yepnope js 完成它：http://yepnopejs.com/

yepnope({
  test: Modernizr.touch,
  yep: 'touch-ui.js',
  nope: 'standard-ui.js'
});

并且当事件被支持时，你可以使用jQuery mobile。

【讨论】：

Modernizr.touch 应该能够检测到触摸设备（在我们的例子中，iOS 设备是指触摸设备）

【解决方案2】：

有 API 可以做到这一点。例如，这是使用手势 API 调整大小和旋转的代码：

var width = 100, height = 200, rotation = ;
node.ongesturechange = function(e){
  var node = e.target;
  // scale and rotation are relative values,
  // so we wait to change our variables until the gesture ends
  node.style.width = (width * e.scale) + "px";
  node.style.height = (height * e.scale) + "px";
  node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
}

node.ongestureend = function(e){
  // Update the values for the next time a gesture happens
  width *= e.scale;
  height *= e.scale;
  rotation = (rotation + e.rotation) % 360;
}

您可以阅读本教程：Touching and Gesturing on the iPhone

【讨论】：