我正在开发一个Big Project，我写了很多GWT代码。现在我正致力于使该项目与iPad和Android平板电脑等平板电脑完全兼容。
作为其中的一部分，我注意到触控设备需要 300ms 延迟来处理点击事件。在这个项目中，再次编写触摸事件是一项非常繁琐的任务。我已经做了很多研究，发现了Google Voice Application中使用的Google Fast Buttons API。我尝试了它并且它的工作正常，但需要大量的编码和JSNI。
我的问题是，你知道还有其他任何可以轻易克服这种延迟的事吗？
答案 0 :(得分：14)
这是一个快速按钮的纯java实现。它不包含一行JNSI
package com.apollo.tabletization.shared.util;
import java.util.Date;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.dom.client.Touch;
import com.google.gwt.event.dom.client.HasAllTouchHandlers;
import com.google.gwt.event.dom.client.HasClickHandlers;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
/** Implementation of Google FastButton {@link http://code.google.com/mobile/articles/fast_buttons.html} */
public class FastButton extends Composite {
private boolean touchHandled = false;
private boolean clickHandled = false;
private boolean touchMoved = false;
private int startY;
private int startX;
private int timeStart;
public FastButton(Widget child) {
// TODO - messages
assert (child instanceof HasAllTouchHandlers) : "";
assert (child instanceof HasClickHandlers) : "";
initWidget(child);
sinkEvents(Event.TOUCHEVENTS | Event.ONCLICK);
}
@Override
public Widget getWidget() {
return super.getWidget();
}
@Override
public void onBrowserEvent(Event event) {
timeStart = getUnixTimeStamp();
switch (DOM.eventGetType(event)) {
case Event.ONTOUCHSTART:
{
onTouchStart(event);
break;
}
case Event.ONTOUCHEND:
{
onTouchEnd(event);
break;
}
case Event.ONTOUCHMOVE:
{
onTouchMove(event);
break;
}
case Event.ONCLICK:
{
onClick(event);
return;
}
}
super.onBrowserEvent(event);
}
private void onClick(Event event) {
event.stopPropagation();
int timeEnd = getUnixTimeStamp();
if(touchHandled) {
//Window.alert("click via touch: "+ this.toString() + "..." +timeStart+"---"+timeEnd);
touchHandled = false;
clickHandled = true;
super.onBrowserEvent(event);
}
else {
if(clickHandled) {
event.preventDefault();
}
else {
clickHandled = false;
//Window.alert("click nativo: "+ this.toString()+ "..." +(timeStart-timeEnd)+"==="+timeStart+"---"+timeEnd);
super.onBrowserEvent(event);
}
}
}
private void onTouchEnd(Event event) {
if (!touchMoved) {
touchHandled = true;
fireClick();
}
}
private void onTouchMove(Event event) {
if (!touchMoved) {
Touch touch = event.getTouches().get(0);
int deltaX = Math.abs(startX - touch.getClientX());
int deltaY = Math.abs(startY - touch.getClientY());
if (deltaX > 5 || deltaY > 5) {
touchMoved = true;
}
}
}
private void onTouchStart(Event event) {
Touch touch = event.getTouches().get(0);
this.startX = touch.getClientX();
this.startY = touch.getClientY();
touchMoved = false;
}
private void fireClick() {
NativeEvent evt = Document.get().createClickEvent(1, 0, 0, 0, 0, false,
false, false, false);
getElement().dispatchEvent(evt);
}
private int getUnixTimeStamp() {
Date date = new Date();
int iTimeStamp = (int) (date.getTime() * .001);
return iTimeStamp;
}
}
答案 1 :(得分：10)
我试图使用上面的答案和评论来试探这个实现。
我还发布了一个样本GWT项目，可用于轻松比较：
http://gwt-fast-touch-press.appspot.com/
https://github.com/ashtonthomas/gwt-fast-touch-press
请注意，如果您使用的是移动设备（或处理触摸事件的设备，并且不会再回到onClick上），您将只能看到节省的时间。
我添加了3个快速按钮和3个普通按钮。你可以很容易地看到旧款移动设备上的改进，有时新版本更少（三星Galaxy Nexus只显示大约100毫秒的延迟，而第一代iPad几乎每次都超过400毫秒）。最大的改进是当你试图快速连续点击方框时（这里不是真正的按钮，但可以改编）
package io.ashton.fastpress.client.fast;
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.core.client.Scheduler.RepeatingCommand;
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
import com.google.gwt.dom.client.Touch;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
/**
*
* GWT Implementation influenced by Google's FastPressElement:
* https://developers.google.com/mobile/articles/fast_buttons
*
* Using Code examples and comments from:
* http://stackoverflow.com/questions/9596807/converting-gwt-click-events-to-touch-events
*
* The FastPressElement is used to avoid the 300ms delay on mobile devices (Only do this if you want
* to ignore the possibility of a double tap - The browser waits to see if we actually want to
* double top)
*
* The "press" event will occur significantly fast (around 300ms faster). However the biggest
* improvement is from enabling fast consecutive touches.
*
* If you try to rapidly touch one or more FastPressElements, you will notice a MUCH great
* improvement.
*
* NOTE: Different browsers will handle quick swipe or long hold/drag touches differently.
* This is an edge case if the user is long pressing or pressing while dragging the finger
* slightly (but staying on the element) - The browser may or may not fire the event. However,
* the browser will always fire the regular tap/press very quickly.
*
* TODO We should be able to embed fastElements and have the child fastElements NOT bubble the event
* So we can embed the elements if needed (???)
*
* @author ashton
*
*/
public abstract class FastPressElement extends Composite implements HasPressHandlers {
private boolean touchHandled = false;
private boolean clickHandled = false;
private boolean touchMoved = false;
private boolean isEnabled = true;
private int touchId;
private int flashDelay = 75; // Default time delay in ms to flash style change
public FastPressElement() {
// Sink Click and Touch Events
// I am not going to sink Mouse events since
// I don't think we will gain anything
sinkEvents(Event.ONCLICK | Event.TOUCHEVENTS); // Event.TOUCHEVENTS adds all (Start, End,
// Cancel, Change)
}
public FastPressElement(int msDelay) {
this();
if (msDelay >= 0) {
flashDelay = msDelay;
}
}
public void setEnabled(boolean enabled) {
if (enabled) {
onEnablePressStyle();
} else {
onDisablePressStyle();
}
this.isEnabled = enabled;
}
/**
* Use this method in the same way you would use addClickHandler or addDomHandler
*
*/
@Override
public HandlerRegistration addPressHandler(PressHandler handler) {
// Use Widget's addHandler to ensureHandlers and add the type/return handler
// We don't use addDom/BitlessHandlers since we aren't sinkEvents
// We also aren't even dealing with a DomEvent
return addHandler(handler, PressEvent.getType());
}
/**
*
* @param event
*/
private void firePressEvent(Event event) {
// This better verify a ClickEvent or TouchEndEvent
// TODO might want to verify
// (hitting issue with web.bindery vs g.gwt.user package diff)
PressEvent pressEvent = new PressEvent(event);
fireEvent(pressEvent);
}
/**
* Implement the handler for pressing but NOT releasing the button. Normally you just want to show
* some CSS style change to alert the user the element is active but not yet pressed
*
* ONLY FOR STYLE CHANGE - Will briefly be called onClick
*
* TIP: Don't make a dramatic style change. Take note that if a user is just trying to scroll, and
* start on the element and then scrolls off, we may not want to distract them too much. If a user
* does scroll off the element,
*
*/
public abstract void onHoldPressDownStyle();
/**
* Implement the handler for release of press. This should just be some CSS or Style change.
*
* ONLY FOR STYLE CHANGE - Will briefly be called onClick
*
* TIP: This should just go back to the normal style.
*/
public abstract void onHoldPressOffStyle();
/**
* Change styling to disabled
*/
public abstract void onDisablePressStyle();
/**
* Change styling to enabled
*
* TIP:
*/
public abstract void onEnablePressStyle();
@Override
public Widget getWidget() {
return super.getWidget();
}
@Override
public void onBrowserEvent(Event event) {
switch (DOM.eventGetType(event)) {
case Event.ONTOUCHSTART: {
if (isEnabled) {
onTouchStart(event);
}
break;
}
case Event.ONTOUCHEND: {
if (isEnabled) {
onTouchEnd(event);
}
break;
}
case Event.ONTOUCHMOVE: {
if (isEnabled) {
onTouchMove(event);
}
break;
}
case Event.ONCLICK: {
if (isEnabled) {
onClick(event);
}
return;
}
default: {
// Let parent handle event if not one of the above (?)
super.onBrowserEvent(event);
}
}
}
private void onClick(Event event) {
event.stopPropagation();
if (touchHandled) {
// if the touch is already handled, we are on a device
// that supports touch (so you aren't in the desktop browser)
touchHandled = false;// reset for next press
clickHandled = true;//
super.onBrowserEvent(event);
} else {
if (clickHandled) {
// Not sure how this situation would occur
// onClick being called twice..
event.preventDefault();
} else {
// Press not handled yet
// We still want to briefly fire the style change
// To give good user feedback
// Show HoldPress when possible
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
@Override
public void execute() {
// Show hold press
onHoldPressDownStyle();
// Now schedule a delay (which will allow the actual
// onTouchClickFire to executed
Scheduler.get().scheduleFixedDelay(new RepeatingCommand() {
@Override
public boolean execute() {
// Clear the style change
onHoldPressOffStyle();
return false;
}
}, flashDelay);
}
});
clickHandled = false;
firePressEvent(event);
}
}
}
private void onTouchStart(Event event) {
onHoldPressDownStyle(); // Show style change
// Stop the event from bubbling up
event.stopPropagation();
// Only handle if we have exactly one touch
if (event.getTargetTouches().length() == 1) {
Touch start = event.getTargetTouches().get(0);
touchId = start.getIdentifier();
touchMoved = false;
}
}
/**
* Check to see if the touch has moved off of the element.
*
* NOTE that in iOS the elasticScroll may make the touch/move cancel more difficult.
*
* @param event
*/
private void onTouchMove(Event event) {
if (!touchMoved) {
Touch move = null;
for (int i = 0; i < event.getChangedTouches().length(); i++) {
if (event.getChangedTouches().get(i).getIdentifier() == touchId) {
move = event.getChangedTouches().get(i);
}
}
// Check to see if we moved off of the original element
// Use Page coordinates since we compare with widget's absolute coordinates
int yCord = move.getPageY();
int xCord = move.getPageX();
boolean yTop = getWidget().getAbsoluteTop() > yCord; // is y above element
boolean yBottom = (getWidget().getAbsoluteTop() + getWidget().getOffsetHeight()) < yCord; // y
// below
boolean xLeft = getWidget().getAbsoluteLeft() > xCord; // is x to the left of element
boolean xRight = (getWidget().getAbsoluteLeft() + getWidget().getOffsetWidth()) < xCord; // x
// to
// the
// right
if (yTop || yBottom || xLeft || xRight) {
touchMoved = true;
onHoldPressOffStyle();// Go back to normal style
}
}
}
private void onTouchEnd(Event event) {
if (!touchMoved) {
touchHandled = true;
firePressEvent(event);
event.preventDefault();
onHoldPressOffStyle();// Change back the style
}
}
}
答案 2 :(得分：6)
我认为前面回答中的代码有一些问题，特别是当它们是多次触摸时。
（注意：我正在查看使用元素库编写的代码作为参考，因此用户库中的某些调用可能会有所不同。）
a）代码没有过滤针对按钮的触摸;它调用TouchEvent.getTouches（）。您想在touchstart和touchmove上调用TouchEvent.getTargetTouches（）以获取仅适用于您的按钮的触摸。你想在touchend上调用TouchEvent.getChangedTouches（）以获得最终结果。
b）代码没有考虑多点触控。在touchstart上，您可以检查单次触摸是否可用，如果有多个触摸，则可以进行拯救。此外，在touchstart上，隐藏触摸的id，然后在touchmove和touchend中使用它来查找返回的数组中的触摸ID（以防用户稍后触摸另一个手指）。您还可以简化并检查touchmove上的多个触摸，然后再触摸和保释。
c）我认为你需要在touchstart上调用stopPropagation，因为你正在处理事件。我没有看到他们在touchstart事件上调用event.stopPropagation你可以看到这发生在点击处理程序中，而不是touchstart。这可以防止浏览器自动将触摸变成点击，这会导致多次点击。
还有一种更简单的方法。如果您不关心从按钮开始拖动，那么您只需在touchstart事件中调用您的单击逻辑（并确保检查单触，并调用event.stopPropagation）并忽略touchmove和touchend。所有touchmove和touchend的东西都是为了处理允许拖动按钮开始的情况。
答案 3 :(得分：1)
同时尝试FastClick
FastClick 是一个简单易用的库，用于消除物理点按与在移动浏览器上触发点击事件之间的 300ms 延迟。目的是让您的应用程序感觉不那么迟钝，响应更快，同时避免干扰您当前的逻辑。
FastClick由英国“金融时报”的FT实验室开发。
该库已作为FT Web App的一部分进行部署，并在以下移动浏览器上进行了测试和测试：
FastClick不会在桌面浏览器上附加任何侦听器，因为它不需要。那些经过测试的是：