Anythingslider触摸滑动功能停止正常点击IOS和平板电脑设备上的链接 [英] Anythingslider touch swipe functionality stopping normal click on links on IOS and tablet devices

问题描述

我正在使用任何滑块jquery插件和触摸事件。
它似乎在所有设备上按预期工作，允许用户通过触摸平板电脑和ios设备以及在桌面上使用鼠标来滑动。

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

但是我的滑块包含链接的图像和文字，无法选中（通过平板电脑和ios设备激活链接，文本保持悬停css样式，但触摸无效。

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?

ie我需要能够滑动并选择滑块中的链接。

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

我认为我的选项是：
1.限制滑动效果到图像，保留文本框可点击
2.添加到jquery选项，如果零运动激活链接
3.将文本的z-index更改为'swipe overlay'div

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

我不知道如何编写选项1或2.建议请？

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

第3项我将尝试平均时间。

item 3 i will try in the mean time.

推荐答案

你是touchstart事件监听器正在调用preventDefault（）来阻止事件冒泡到点击事件。如果你删除它，但将它保留在移动和结束事件中它应该工作。

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.

这篇关于Anythingslider触摸滑动功能停止正常点击IOS和平板电脑设备上的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！