iOS Web App触摸手势 [英] iOS Web App touch gestures

问题描述

我在网络上搜索了所有内容，以找到一种将触摸手势添加到简单按钮的简单方法。基本上我想找到一个简单的方法来获得返回按钮（通常在iOS设备顶部的任务栏上看到），以便在压缩时将CSS类从正常状态更改为按下状态。

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.

虽然我是Javascript的新手，但我宁愿使用标准的DOM方法，而不是jQuery（或任何其他库）。任何人都有一些完整的代码，并解释JavaScript代码如何读取 ontouchstart 和 ontouchend 事件以及这些函数如何用于更改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 ontouchstart and ontouchend event and how these functions could be used to change CSS classes?

任何帮助都将非常感谢！

Any help would be greatly appreciated!

TC

推荐答案

ontouchstart ， ontouchmove code> onuchend 的管理方式与 onclick ， onmousemove 等相同。

ontouchstart, ontouchmove and ontouchend are managed the same as onclick, onmousemove and so.

您可以在< script> 标记中应用侦听器或直接在 html 元素。

You can apply the listeners in a <script> tag or directly in the html element.

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类

Using HTML tag and callbacks

1) Declare your Javascript callbacks to swap a css class for any state

function onclickCallback( event ) {
 // do something
}

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

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

2）将回调放入锚标签使用 DIV 而不是 A ）

2) Put the callbacks into the anchor tag (I suggest to use DIV instead of A)

<div class="normal" onclick="onclickCallback( event );" ontouchstart="ontouchstartCallback( event );" ontouchend="ontouchendCallback( event );">Back</div>

编辑1：防止在滚动期间出现冻结

尝试添加ontouchmove处理程序

Edit 1: to prevent hilight freezing during scrolling

Try to add the ontouchmove handler

ontouchmove="ontouchmoveCallback( event );"

然后声明交换css类的处理函数

Then declare the handler function that swap the css class

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

希望这有帮助！
Ciao。

Hope this helps! Ciao.

这篇关于iOS Web App触摸手势的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！