8
我刚刚完成我的旋转木马滑块与触摸事件为我建立的网站完成。目前正试图弄清楚如何使用点击事件禁用触摸事件(hammer)。这里是我一直在努力关闭hammer.js触摸事件使用onclick事件
类.slider-layout的代码使转盘，而类.tile-layout禁用旋转木马，并在卡片视图布局变换布局
更新＃1
我试着删除绑定hammer.js但没有工作的类。
var activeSlide = 0;
$('.faculty-carousel').attr('data-slide', '0');
$('.tile-layout').on('click', function() {
$('.faculty-items').each(function() {
$(this).addClass('tile-view');
})
})
$('.prev').on('click', function(e) {
event.stopPropagation();
var carouselWrapper = $(this).closest('.faculty-carousel'),
facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
facultyProfileCount = facultyProfilePanel.length,
viewPortSize = $(window).width(),
carousel = carouselWrapper.find('.faculty-items'),
position = 0,
currentSlide = parseInt(carouselWrapper.attr('data-slide'));
// Check if data-slide attribute is greater than 0
if (currentSlide > 0) {
// Decremement current slide
currentSlide--;
// Assign CSS position to clicked slider
var transformPercentage = -1 * currentSlide/facultyProfileCount * 100;
carousel.css('transform', 'translateX(' + transformPercentage + '%)');
// Update data-slide attribute
carouselWrapper.attr('data-slide', currentSlide);
activeSlide = currentSlide;
}
});
$('.next').on('click', function(e) {
event.stopPropagation();
// store variable relevent to clicked slider
var carouselWrapper = $(this).closest('.faculty-carousel'),
facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
facultyProfileCount = facultyProfilePanel.length,
viewPortSize = $(window).width(),
carousel = carouselWrapper.find('.faculty-items'),
position = 0,
currentSlide = parseInt(carouselWrapper.attr('data-slide'));
// Check if dataslide is less than the total slides
if (currentSlide < facultyProfileCount - 1) {
// Increment current slide
currentSlide++;
// Assign CSS position to clicked slider
var transformPercentage = -1 * currentSlide/facultyProfileCount * 100;
carousel.css('transform', 'translateX(' + transformPercentage + '%)');
// Update data-slide attribute
carouselWrapper.attr('data-slide', currentSlide);
activeSlide = currentSlide;
}
})
function touchCarousel() {
$('.faculty-carousel .faculty-items').each(function() {
// create a simple instance
// by default, it only adds horizontal recognizers
var direction,
touchSlider = this,
mc = new Hammer.Manager(this),
itemLength = $(this).find('li').length,
count = 0,
slide = $(this),
timer;
var sliderWrapper = slide,
slideItems = sliderWrapper.find('li'),
//slider = sliderWrapper.find('li'),
totalPanels = slideItems.length,
currentSlide = parseInt(sliderWrapper.attr('data-slide'));
// mc.on("panleft panright", function(ev) {
// direction = ev.type;
// });
mc.add(new Hammer.Pan({
threshold: 0,
pointers: 0
}));
mc.on('pan', function(e) {
var percentage = 100/totalPanels * e.deltaX/window.innerWidth;
var transformPercentage = percentage - 100/totalPanels * activeSlide;
touchSlider.style.transform = 'translateX(' + transformPercentage + '%)';
var sliderWrapper = $(e.target).closest('.faculty-carousel')
if (e.isFinal) { // NEW: this only runs on event end
var newSlide = activeSlide;
if (percentage < 0)
newSlide = activeSlide + 1;
else if (percentage > 0)
newSlide = activeSlide - 1;
goToSlide(newSlide, sliderWrapper);
}
});
var goToSlide = function(number, sliderWrapper) {
if (number < 0)
activeSlide = 0;
else if (number > totalPanels - 1)
activeSlide = totalPanels - 1
else
activeSlide = number;
sliderWrapper.attr('data-slide', activeSlide);
touchSlider.classList.add('slide-animation');
var percentage = -(100/totalPanels) * activeSlide;
touchSlider.style.transform = 'translateX(' + percentage + '%)';
timer = setTimeout(function() {
touchSlider.classList.remove('slide-animation');
}, 400);
};
});
}
function panelSizing() {
// var activeSlide = 0;
// $('.faculty-carousel').attr('data-slide', '0');
var viewPortSize = $(window).width(),
carouselWrapper = $('.faculty-carousel')
;
//Set Panel Size based on viewport
if (viewPortSize <= 1920) {
var profilePanelSize = viewPortSize/5
}
if (viewPortSize < 1024) {
var profilePanelSize = viewPortSize/4
}
if (viewPortSize < 768) {
var profilePanelSize = viewPortSize/3
}
if (viewPortSize < 480) {
var profilePanelSize = viewPortSize
}
carouselWrapper.each(function(){
var wrapper = $(this);
// wrapper.attr('data-slide', '0');
var facultyPanel = wrapper.find('.faculty-items li'),
profileCount = facultyPanel.length,
// activeSlide = 0,
carousel = wrapper.find('.faculty-items');
carousel.outerWidth(profilePanelSize * profileCount);
facultyPanel.outerWidth(profilePanelSize);
carousel.css('transform', 'translateX(' + 0 + '%)');
});
}
$('.tile-layout').on('click', function() {
$('.faculty-items').each(function() {
$(this).addClass('tile-view');
$('.faculty-carousel .faculty-items').css('transform', 'translateX(' + 0 + '%)');
})
});
$('.slider-layout').on('click', function() {
$('.faculty-items').each(function() {
$(this).removeClass('tile-view');
})
})
$(document).ready(function() {
panelSizing();
touchCarousel()
})
$(window).on('resize', function(){
panelSizing();
touchCarousel()
})html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
.faculty-items.tile-view {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important; }
.faculty-items li {
height: 100px;
display: inline-block;
position: relative; }
.faculty-items li > a {
position: absolute;
top: 0;
width: 100%;
height: 100%;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none; }
.faculty-items li:nth-child(odd) {
background-color: grey; }
.faculty-items li:nth-child(even), .faculty-items a:nth-child(even) {
background-color: aqua; }
.faculty-items {
overflow: hidden;
position: relative;
right: 0;
display: flex;
-webkit-transition: transform 0.3s linear; }
.faculty-carousel .controls {
display: block; }
/*# sourceMappingURL=style.css.map */<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="slider-layout">
slider layout
</div>
<div class="tile-layout">
tile layout
</div>
<div class="faculty-carousel">
<ul class="faculty-items">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
<div class="controls">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
<div class="faculty-carousel">
<ul class="faculty-items">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
</ul>
<div class="controls">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
<div class="faculty-carousel">
<ul class="faculty-items">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
</ul>
<div class="controls">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>