Javascript Data-API always attaches click events (when touch events are preferred for mobile)

[pamelafox]

I use Twitter Bootstrap for both the web and mobile app versions of my site. The JS data API works great on the web, but when I ported it to mobile, I realized that it uses click events for everything - and touch events are the preferred mode of interaction on mobile apps.
I ended up having to comment out the data-API bit and re-write it using touch events in my mobile code.

Touch events are pretty tricky and developers use multiple libraries for dealing with them, so I'm not sure if Bootstrap wants to tackle the issue. But maybe there's a smart way that Bootstrap can let developers use the data API with their preferred "click mechanism". Something to think about, at least.

[ctalkington]

I know in my recent pull request #2640 for carousel swiping that touch support really doesn't have to be that hard. It most likely would just involve checking for common touch events and having them call existing functions as I did with carousel.

Could you give me some examples of which components you are running into this with and also feel free to try out my changes to carousel at bootstrap.simplydev.com. would be great to get some feedback on various touch devices.

[ctalkington]

The reason I ask for examples is because from what Adobe has pointed out in this doc.

Note: Listening for touch and gesture events can consume a significant amount of processing resources (equivalent to rendering several frames per second), depending on the computing device and operating system. It is often better to use mouse events when you do not actually need the extra functionality provided by touch or gestures. When you do use touch or gesture events, consider reducing the amount of graphical changes that can occur, especially when such events can be dispatched rapidly, as during a pan, rotate, or zoom operation. For example, you could stop animation within a component while the user resizes it using a zoom gesture.

http://help.adobe.com/en_US/as3/dev/WSb2ba3b1aad8a27b0-6ffb37601221e58cc29-8000.html

[ctalkington]

I should note that most of the additional load would come from supporting multi-touch and such. I believe from what I have picked up playing with carousel that each time you listen for gestures you have to handle 3 different events which is where performance can take a hit.

[pamelafox]

I am using the modals in my mobile app, and that's where I had to make the touch/click modification. The complex part for my code is that I don't actually use touch for everything - there are some places where I choose to use click instead, depending on how well touch works or doesn't work (mostly due to Android Webkit quirkiness). So I have wrapper functions that either always assign a click handler, or that assign a touch handler or a click handler, if touch is supported. I think I'm currently using click for modals after testing how touch worked, actually, but I needed the flexibility of checking which one works better.
I also find that things can get a bit odd when you mix click/touch events in the same app, especially when DOM is layered on top of other DOM, so I try to stick as much with one approach as I can.

So in conclusion: my use case is complex. Hopefully others arent as complex. And this all should get better. Once Android stops being the worst Webkit ever.

[ctalkington]

gotcha, it would be kinda interesting to maybe implement touch as a plugin, kind of how transitions work but make it check for mobile being included and run data api stuff from it vs standard. that way nothing existing breaks but if someone has true mobile needs then its just another include for advanced use cases.

[fat]

Well you can turn off the data click api (without having to comment anything out like this):

$('body').off('.data-api')

that will remove all click events.

I'll start thinking about a better solution for you mobile nerds though :)

[fat]

Hey @pamelafox,

Thanks for opening this issue! Unfotunately, it looks like it fails to pass the tests neccessary for submitting to bootstrap. The following tests are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!