使用 onclick 事件禁用和重新启用 JavaScript 函数

Question

I'm trying to figure out how I can disable a javascript function using an onclick event. I've just finished building a carousel with touch events. Now I'm creating another which enables or disables the carousel by onclick events.

Here is a sample of my code I've built. The function that I want to disable is the touchCarousel which controls the touch events.

The class .slider-layout enables the carousel while the class .tile-layout disable the carousel and transforms the layout in a card view layout

 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>

Answer 1

Very simply, add a flag such as is_enabled and when they enable/disable, set is_enabled respectively then when they try to use the carousel check if your is_enabled flag is false , if it is return false so execution stops.

Update

By flag I simply mean a variable which has been created for the purpose of checking if a condition has been met, generally Boolean of a value.

Example

Simple example below of a click even being prevented by a flag.

JSFiddle

Answer 2

you can easy handle this issue with this code after you function see this codes

function disableClick() {
   document.getElementById('yourId you want disable on click').onclick = "";
}