使用TouchSwipe的CarouFredSel插件,链接不起作用

Question

我正在使用令人敬畏的CarouFredSel JQuery carousel插件,其中包含用于集成手持设备的JQuery TouchSwipe库的功能.

轮播元素是div,div中是包含在<ahref>标签中的图像和文本.

一切都按预期工作,但我注意到如果轮播元素(在本例中为div)包含链接,则对各种移动设备的滑动效果不起作用.

如果我删除图像/文本周围的链接,滑动动作工作正常.这几乎就像preventDefault()反向工作一样.如果我删除图像周围的链接,并将文本保留为链接,则滑动适用于图像,而不是文本.

我可以轻松点击该项目作为链接,如果它是一个链接,我只是无法刷卡.

有没有人特别遇到CarouFredsel这个问题？

非常感谢,所以.

Answer 1

默认情况下,元素禁用Touchswipe.

见http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html

从链接:默认情况下,$ .fn.swipe.defaults.excludedElements的值为"button,input,select,textarea,a,.noSwipe".要替换或清除列表,请重新设置excludedElements数组.要附加到它,请执行以下操作(不要忘记正在进行的逗号)...

excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });

我最后只更改了插件中的默认值,因为我的所有模态都是一个锚元素的子元素.

excludedElements:"button, input, select, textarea, .noSwipe"

Answer 2

该carouFredSel与<一>不为我用刷卡的工作以及"内部".你可以使用excludedElements,但在Ipad上,你必须用手指来使用<a>(longTap).这对用户来说并不好.如果您尝试使用carouFredSel({swipe :(选项{tap:function ...它将无效(至少在我的情况下).

我的解决方案是分别使用滑动(touchSwipe):

$(".carusel").swipe({
  excludedElements: "button, input, select, textarea, .noSwipe",
  swipeLeft: function() {
    $('.carusel').trigger('next', 4);
  },
  swipeRight: function() {
    $('.carusel').trigger('prev', 4);
  },
  tap: function(event, target) {
    window.open($(target).closest('.carusel-cnt').find('carusel-cnt-link').attr('href'), '_self');
  }
});