3

我在整个网络上进行了搜索，以找到一种将触摸手势添加到简单按钮的简单方法。基本上，我试图找到一种简单的方法来获取后退按钮（通常在 iOS 设备顶部的任务栏上看到），以便在按下时将 CSS 类从“正常”状态更改为“按下”状态。

虽然我对 Javascript 很陌生，但我更喜欢使用标准 DOM 方法而不是 jQuery（或任何其他库）。谁能有一些完整的代码并解释 JavaScript 代码如何读取ontouchstart和ontouchend事件以及如何使用这些函数来更改 CSS 类？

任何帮助将不胜感激！

TC

4

3 回答 3

6

ontouchstart,ontouchmove和ontouchend, 的管理方式与 ,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 标签和回调

1) 声明您的 Javascript 回调以将 css 类交换为任何状态


function onclickCallback( event ) {
 // do something
}

function ontouchstartCallback( event ) {
 event.target.className = 'selected';
}

function ontouchendCallback( event ) {
 event.target.className = 'normal';
}

2）将回调放入锚标记（我建议使用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';
}

希望这可以帮助！再见。

于 2011-02-01T03:01:36.667 回答
2

这应该让你开始：

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 有时会在触摸事件和表单元素（尤其是输入框）方面做一些奇怪的事情。您可能会发现使用样式化的 div 比使用实际的输入按钮更好。

编辑：对于你想要做的事情，我认为简单的点击事件可能会更好地为你服务，这通常适用于按钮按下之类的事情。触摸事件更多用于拖放、精确的手指跟踪等。试试这个：

thebutton.onclick = function(e) { this.setAttribute('class', 'your_class'); };

EDIT2：现在我明白你的要求了。最简单的方法是这样的：

thebutton.ontouchstart = function(e) { this.setAttribute('class', 'pressed'); };
thebutton.ontouchend   = function(e) { this.setAttribute('class', ''); };
于 2011-02-01T02:17:30.350 回答
1

已经有几个库用于 jQuery

http://plugins.jquery.com/project/multiswipe

你也可以从

http://taitems.github.com/Mobile-Web-based-Gesture-Recognition/

你可以分叉这个例子并开始使用它。

有一些选择，但一切都很新。

于 2011-02-01T02:13:56.690 回答