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

问题

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.

回答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.

回答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
});

回答3:

You just have to remove this:

e.preventDefault();

来源：https://stackoverflow.com/questions/8744766/anythingslider-touch-swipe-functionality-stopping-normal-click-on-links-on-ios-a

标签

jquery

html5

anythingslider