javascript iOS Web App 触摸手势
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4858172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS Web App touch gestures
提问by TronCraze
I've searched all across the web to find a simple way of adding touch gestures to a simple button. Basically I'm trying to find a simple way of getting the back button (which you usually see on the task-bar at the top of an iOS device) to change CSS classes from 'normal' state to 'pressed' state when pressed.
我在整个网络上进行了搜索，以找到一种向简单按钮添加触摸手势的简单方法。基本上，我试图找到一种简单的方法来获取后退按钮（您通常会在 iOS 设备顶部的任务栏上看到）以在按下时将 CSS 类从“正常”状态更改为“按下”状态。
Although I'm very new to Javascript, I would prefer to use standard DOM methods rather than jQuery (or any other library). Would anyone have some complete code and explain how the JavaScript code reads an ontouchstartand ontouchendevent and how these functions could be used to change CSS classes?
虽然我对 Javascript 很陌生，但我更喜欢使用标准的 DOM 方法而不是 jQuery（或任何其他库）。谁能有一些完整的代码并解释 JavaScript 代码如何读取ontouchstart和ontouchend事件以及如何使用这些函数来更改 CSS 类？
Any help would be greatly appreciated!
任何帮助将不胜感激！
TC
技术委员会
回答by lomanf
ontouchstart, ontouchmoveand ontouchendare managed the same as onclick, onmousemoveand so.
ontouchstart,ontouchmove和ontouchend的管理方式相同onclick，onmousemove等等。
You can apply the listeners in a <script>tag or directly in the htmlelement.
您可以在<script>标签中或直接在html元素中应用侦听器。
Using JavaScript only
仅使用 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';
}
Using HTML tag and callbacks
使用 HTML 标记和回调
1) Declare your Javascript callbacks to swap a css class for any state
1) 声明您的 Javascript 回调以交换任何状态的 css 类
function onclickCallback( event ) {
// do something
}
function ontouchstartCallback( event ) {
event.target.className = 'selected';
}
function ontouchendCallback( event ) {
event.target.className = 'normal';
}
2) Put the callbacks into the anchor tag (I suggest to use DIVinstead of A)
2）将回调放入锚标签（我建议使用DIV而不是A）
<div class="normal" onclick="onclickCallback( event );" ontouchstart="ontouchstartCallback( event );" ontouchend="ontouchendCallback( event );">Back</div>
Edit 1: to prevent hilight freezing during scrolling
编辑 1：防止滚动期间高亮冻结
Try to add the ontouchmove handler
尝试添加 ontouchmove 处理程序
ontouchmove="ontouchmoveCallback( event );"
Then declare the handler function that swap the css class
然后声明交换css类的处理函数
function ontouchmoveCallback( event ) {
event.target.className = 'normal';
}
Hope this helps! Ciao.
希望这可以帮助！再见。
回答by Luke Dennis
This should get you started:
这应该让你开始：
HTML:
HTML：
<input type="button" id="thebutton" value="Do Stuff!" />
Javascript:
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
};
For more details, see: http://sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
有关更多详细信息，请参阅：http: //sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
It's worth noting that MobileSafari sometimes does wonky things with touch events and form elements (input boxes in particular). You may find it's better to use a styled div than an actual input button.
值得注意的是，MobileSafari 有时会在触摸事件和表单元素（特别是输入框）方面做一些奇怪的事情。您可能会发现使用样式化的 div 比使用实际的输入按钮更好。
EDIT:For what you're trying to do, I think you might be better served with simple click events, which generally work fine for things like button presses. Touch events are more for drag and drop, precise finger tracking etc. Try this:
编辑：对于你想要做的事情，我认为你可能会更好地使用简单的点击事件，这通常适用于按下按钮之类的事情。触摸事件更多用于拖放、精确的手指跟踪等。试试这个：
thebutton.onclick = function(e) { this.setAttribute('class', 'your_class'); };
EDIT2:Now I see what you're asking for. Easiest way is this:
EDIT2：现在我明白你要什么了。最简单的方法是这样的：
thebutton.ontouchstart = function(e) { this.setAttribute('class', 'pressed'); };
thebutton.ontouchend = function(e) { this.setAttribute('class', ''); };
回答by Siedrix
There are a couple of libraries already for jQuery
jQuery 已经有几个库
http://plugins.jquery.com/project/multiswipe
http://plugins.jquery.com/project/multiswipe
And you also can check this demo from
你也可以从
http://taitems.github.com/Mobile-Web-based-Gesture-Recognition/
http://taitems.github.com/Mobile-Web-based-Gesture-Recognition/
And you can fork the example and start working with it.
你可以分叉这个例子并开始使用它。
There are some options but everything its quite new.
有一些选择，但一切都很新。
