Anythingslider touch swipe functionality stopping normal click on links on IOS and tablet devices

Question

I am using the anything slider jquery plugin with the touch events. it appears to be working as expected on all devices allowing users to 'swipe' by touch on tablets and ios devices and by using the mouse on a desktop.

$('#slider').anythingSlider({   
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {

var time = 1000, // allow movement if < 1000 ms (1 sec)
        range = 50,  // swipe movement of 50 pixels triggers the slider
        x = 0, t = 0, touch = "ontouchend" in document,
        st = (touch) ? 'touchstart' : 'mousedown',
        mv = (touch) ? 'touchmove' : 'mousemove',
        en = (touch) ? 'touchend' : 'mouseup';

    slider.$window
        .bind(st, function(e){
            // prevent image drag (Firefox)
            e.preventDefault();
            t = (new Date()).getTime();
            x = e.originalEvent.touches ? 
                e.originalEvent.touches[0].pageX : e.pageX;
        })
        .bind(en, function(e){
            t = 0; x = 0;
        })
        .bind(mv, function(e){
            e.preventDefault();
var newx = e.originalEvent.touches ? 
           e.originalEvent.touches[0].pageX : e.pageX,
            r = (x === 0) ? 0 : Math.abs(newx - x),
            // allow if movement < 1 sec
            ct = (new Date()).getTime();
            if (t !== 0 && ct - t < time && r > range) {
                if (newx < x) { slider.goForward(); }
                if (newx > x) { slider.goBack(); }
                t = 0; x = 0;
            }
        });

however my sliders, which contain both images and text that are links, can not be 'selected' (link activated) by tablets and ios devices, the text maintains the hover css styling, but touching does nothing.

clicking via a mouse on a desktop still works and users can click through to articles.

any idea on how to make this work on all devices?

i.e. i need to be able to slide and also select the links in the slider.

i think my options are: 1. limit the swipe effect to the images, leaving the text box clickable 2. add to the jquery option that if there is zero movement activate the link 3. change the z-index of the text to be above the 'swipe overlay' div

i have no idea how to code options 1 or 2. advice please?

item 3 i will try in the mean time.

Hiss

adjusting the range and time makes no difference. – Hiss

Try what @Ian suggest; and he should add that as an answer so I can upvote it ;) – Florist

Answer 1

You're touchstart event listener is doing calling preventDefault() which prevents the event from bubbling up to the click event. If you remove it, but keep it in the move and end events it should work.

Nelly

Answer 2

Alternatively (if you don't want to modify their source) you can bind the following handler to the Click event of TouchSwipe (I'm using jQuery but you get the idea) :

function (e, target) { $(target).click(); }

This will bubble up the event.

UPDATE WITH CODE SAMPLE SNIPPET:

$(document).swipe({
  swipe:function(event, direction, distance, duration, fingerCount) {
  },
  click:function (event, target) {
    $(target).click();
  },
  threshold:75
});

Lightweight

And how does one bind this handler to the click event ? – Gibbons

This is the best answer! Thank you! CODE: $(document).swipe({swipe:function(event, direction, distance, duration, fingerCount) {},click:function (event, target) {$(target).click();},threshold:75}); – Caligula

This have to be the accepted answer. Saved my day. Thanks – Artiodactyl

Answer 3

You just have to remove this:

e.preventDefault();

Rudyrudyard