iOS Web App触控手势

Question

我在网上搜索了一个简单的方法来添加触摸手势到一个简单的按钮.基本上我正在尝试找到一种简单的方法来获取后退按钮(通常在iOS设备顶部的任务栏上看到),以便在按下时将CSS类从"正常"状态更改为"按下"状态.

虽然我对Javascript很新,但我更喜欢使用标准DOM方法而不是jQuery(或任何其他库).是否有人会有一些完整的代码并解释JavaScript代码如何读取ontouchstart和ontouchend事件以及这些函数如何用于更改CSS类？

任何帮助将不胜感激!

TC

Answer 1

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

希望这可以帮助!再见.