我使用的是真棒CarouFredSel JQuery的旋转木马插件,它包括用于集成功能的JQuery TouchSwipe库,用于手持设备为好。
转盘元件的div,内DIV是图像和文本包裹在一个<ahref>
标记。
一切正常,因为它应该,但我注意到,如果传送带元素(在这种情况下,一个div)包含一个链接,在各种移动设备上刷一下效果不起作用。
如果我删除周围的图像/文本中的链接时,刷运动正常工作。 这是几乎一样,如果preventDefault()
以相反的工作。 如果我删除图像周围的链接,并留下文字为纽带,挥动工程为图像,而不是文字。
我可以轻松地点击项目为纽带,我如果是一个链接就不能刷卡。
任何人都经历了这个问题CarouFredsel特别?
非常感谢,SO。
Answer 1:
Touchswipe被默认为禁用的元素。
见http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html
从链接:默认情况下$ .fn.swipe.defaults.excludedElements的值是“按钮,输入,选择,文本区域,一,.noSwipe,”要更换或清除该列表,重新设置excludedElements阵列。 要追加到它,请执行下列操作(不要忘了诉讼逗号)...
excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });
最后我只是改变了插件的默认值,因为我所有的情态动词是定位元素的儿童。
excludedElements:"button, input, select, textarea, .noSwipe"
Answer 2:
该carouFredSel与<一>不为我用刷卡的工作以及“内部”。 您可以使用excludedElements,但在iPad上,你必须用手指按住使用<一>(longTap)。 这不是很好的用户。 如果您尝试使用carouFredSel({刷卡:(选项{龙头:功能......它不会(至少在我的情况)工作。
我的解决办法是单独使用刷卡(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');
}
});
Answer 3:
好了,我真的很喜欢,如果使用内TouchSwipe环节和CarouFredSel插件是可以知道的,但我发现,似乎工作解决方法。
希望这会帮助别人。
我结束了使用第二触摸jQuery库, TouchWipe 。
如果,调用CarouFredSel插件,我的刷卡参数设置为true:
$('#carousel-slider').carouFredSel({
width: '100%',
prev: '#prev-propslider',
next: '#next-propslider',
swipe: true
});
然后,称双方TouchSwipe和Touchwipe libaries(不知道这重要的,但我使用的常规TouchSwipe swipe:true
参数没有链接另一个滑块),我写了一个单独的函数调用的TouchWipe插件自定义事件:
$('#carousel-slider').touchwipe({
wipeLeft: function() {
$('#carousel-slider').trigger('next', 1);
},
wipeRight: function() {
$('#carousel-slider').trigger('prev', 1);
}
});
希望这可以帮助别人,但我真的很想知道,如果TouchSwipe和CarouFredSel可以工作<a href>
标签,因为我无法找到任何带电作业的例子。
Answer 4:
Caroufredsel已经整合,并与touchswipe兼容。
- 添加tochswipe JS库
- 添加触摸事件的caroufresel配置
JAVASCRIPT结果
$(document).ready(function () {
$('#foo2').carouFredSel({
auto: false,
responsive: false,
items: {
visible: 3,
width: 100
},
width: 600,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
swipe: {
onMouse: true,
onTouch: true
}
});
});
这是一个工作演示
Answer 5:
感谢您与excludedElements的解决方案,即固定我的问题也是如此。 从来没有想到这一点。
但你不必单独使用touchwipe插件,有“swipe.options”作为在caroufredsel插件touchswipe配置选项。 见的caroufredsel选项
在那里,你可以使用所有的touchswipe插件的选项 ,我想。
Answer 6:
您可以使用下面的功能,使点击后刷卡。
`$('.class').swipe({
swipe: function(event, direction, distance, duration, fingerCount) {},
click: function(event, target) {
$(target).click();
},
threshold: 75
});`
https://stackoverflow.com/a/11919170/3223427
文章来源: CarouFredSel Plugin using TouchSwipe with links not working