logo标签列表

iOS Web应用程序的触摸手势

javascriptcssiosgesturestouch-event
3
我已经搜索了整个互联网，想找到一个简单的方法来为一个简单按钮添加触控手势。基本上，我试图找到一种简单的方法来使后退按钮（通常在iOS设备顶部的任务栏中看到）在按下时从“正常”状态更改CSS类到“按下”状态。

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

任何帮助都将不胜感激！

TC

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';
}

希望这能有所帮助！再见。
谢谢，非常好用！只有一个快速的问题，如果您在页面上滚动并且您的手指意外地覆盖了一个div，则CSS样式仍然会更改，是否有任何方法在Javascript代码中设置规则，使CSS仅在您点击而不是滚动时更改？ - TronCraze
嘿lomanf，我尝试了你的建议，但仍然没有运气。我在想，是否有一种方法可以结合函数，也许如果ontouch和onmove->不更改CSS？ - TronCraze
嗨，我在你的另一个问题上写了一个答案，关于这个问题。问题与滚动有关，在拖动阶段冻结渲染内容。在jQTouch中，他们通过短暂延迟“按下”状态来解决了这个问题。你可以试试吗？ - lomanf
你会如何实现点击检测？ - SuperUberDuper
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'); };

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

thebutton.ontouchstart = function(e) { this.setAttribute('class', 'pressed'); };
thebutton.ontouchend   = function(e) { this.setAttribute('class', ''); };
嘿，Luke，感谢你的评论！我尝试了你的例子，但似乎无法使其工作，特别是 .onclick 函数 - 按钮的样式似乎没有改变 :S - TronCraze
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接