-3

I'm writing a mobile web page. I'd like to understand how to precisely control touch events. I can do stuff like see when a touch event starts and ends above an element, but managing what happens in between seems difficult.

I want a simple button that:

  • Starts with a class A,
  • on touchstart, gets a different class B (a "hoverstate"),
  • when the touch event ends over the element that was clicked, it gets a different class C,
  • when the touch event ends not over the element that was originally clicked, reverts back to the original class A,
  • when the touch event stops being over the element (but hasn't ended yet), the element reverts back to class A, and
  • if the touch event stopped being over the element, but comes back to being over the element again (all the same touch event - ie no touchend or touchcancel yet), then go back to class B again (the hoverstate)

In addition I want to make sure that:

  • A click event that started on one button does not interfere with the classes on other buttons
  • if there are divs inside the button (lets say a text span), they don't interfere with any of the states
  • Ideally I can do this in bulk (ie $('.everyButton').on('whatever', ....))

I'm using jQuery, but anything will help. This seems like it should be pretty easy, but I've been having a tough time getting it to do what I want. Anyone have a good design for this?

B T
  • 57,525
  • 34
  • 189
  • 207

2 Answers2

1

You should maybe look into hammer.js http://eightmedia.github.io/hammer.js/ maybe this is what you need.

rorlork
  • 523
  • 5
  • 15
  • I've seen hammer and a dozen other touch libraries. This in no way answers my question. – B T Aug 23 '13 at 15:08
0

Since no touch library seems to offer this, I created one: https://github.com/fresheneesz/touchjs . There's no documentation in the readme page yet - its all in the source for now. I'll put info on the readme soon.

B T
  • 57,525
  • 34
  • 189
  • 207