iOS Web App触摸手势
我search了整个networking，find一个简单的方法添加触摸手势到一个简单的button。 基本上我试图find一个简单的方法来获取后退button（通常在iOS设备顶部的任务栏上看到的）按下时，将CSS类从“正常”状态更改为“已按下”状态。
虽然我对Javascript很陌生，但我更喜欢使用标准的DOM方法而不是jQuery（或任何其他库）。 任何人都有一些完整的代码，并解释JavaScript代码如何读取ontouchstart和ontouchend事件，以及如何使用这些函数来更改CSS类？
任何帮助将不胜感激！
TC
ontouchstart ， ontouchmove和ontouchend的pipe理方式与onclick ， onmousemove等相同。
您可以将侦听器应用于<script>标记或直接应用于html元素。
仅使用JavaScript
var back = document.getElementById("back-button-id"); back.ontouchstart = function( event ) { // using the target property of the event // you can reach the hitted html element event.target.className = 'css-href-selected-class-name'; } back.ontouchend = function( event ) { event.target.className = 'css-href-normal-class-name'; }
使用HTML标记和callback
1）声明你的Javascriptcallback交换任何状态的CSS类
function onclickCallback( event ) { // do something } function ontouchstartCallback( event ) { event.target.className = 'selected'; } function ontouchendCallback( event ) { event.target.className = 'normal'; }
2）把callback放入锚标签（我build议使用DIV而不是A ）
<div class="normal" onclick="onclickCallback( event );" ontouchstart="ontouchstartCallback( event );" ontouchend="ontouchendCallback( event );">Back</div>
编辑1：防止滚动期间的高光冻结
尝试添加ontouchmove处理程序
ontouchmove="ontouchmoveCallback( event );"
然后声明交换css类的处理函数
function ontouchmoveCallback( event ) { event.target.className = 'normal'; }
希望这可以帮助！ 再见。
这应该让你开始：
HTML：
<input type="button" id="thebutton" value="Do Stuff!" />
使用Javascript：
var thebutton = document.getElementById("thebutton"); thebutton.ontouchstart = function(e) { this.setAttribute('class', 'pressed'); var touches = e.touches; // array of all touch data var target = touches[0].target; // what DOM element was touched var pageX = touches[0].pageX; // coords relative to site var pageY = touches[0].pageY; var clientX = touches[0].clientX; // coords relative to screen var clientY = touches[0].clientY; }; thebutton.ontouchmove = function(e) { var touches = e.touches; // same fields as above var changedTouches = e.changedTouches; // only touches which have changed }; thebutton.ontouchend = function(e) { this.setAttribute('class', ''); // cleanup, if needed };
有关更多详细信息，请参阅： http : //sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
值得注意的是，MobileSafari有时会用触摸事件和表单元素（特别是input框）来做一些不起眼的事情。 您可能会发现使用样式的div比实际的inputbutton更好。
编辑：对于你想要做的，我认为你可能会更好地服务与简单的点击事件，这通常button按下的东西，工作正常。 触摸事件更多的是拖放，精确的手指跟踪等。试试这个：
thebutton.onclick = function(e) { this.setAttribute('class', 'your_class'); };
编辑2：现在我看到你在问什么。 最简单的方法是：
thebutton.ontouchstart = function(e) { this.setAttribute('class', 'pressed'); }; thebutton.ontouchend = function(e) { this.setAttribute('class', ''); };
已经有几个库已经用于jQuery
http://plugins.jquery.com/project/multiswipe
你也可以查看这个演示
http://taitems.github.com/Mobile-Web-based-Gesture-Recognition/
你可以分解这个例子，并开始使用它。
有一些select，但一切都很新。