I have a scrollable list on a mobile device. They want people to be able to scroll the list via swiping, and also select a row by tapping.
The catch is combining th
I did this with a bit of a different work around. It's definitely not very elegant and certainly not suited to most situations, but it worked for me.
I have been using jQuery's toggleSlide() to open and close input divs, firing the slide on touchstart. The problem was that when the user wanted to scroll, the touched div would open up. To stop this from happening, (or to reverse it before the user noticed) I added a touchslide event to the document which would close the last touched div.
In more depth, here is a code snippet:
var lastTouched;
document.addEventListener('touchmove',function(){
lastTouched.hide();
});
$('#button').addEventListener('touchstart',function(){
$('#slide').slideToggle();
lastTouched = $('#slide');
});
The global variable stores the last touched div, and if the user swipes, the document.touchmove event hides that div. Sometimes you get a flicker of a div poking out but it works for what I need it to, and is simple enough for me to come up with.