Событие стрельбы и не может не случиться

Question

Я новичок в Javascript, и я разрабатываю webapp. Я использую quojs, библиотеку для тактильных жестов, но моя проблема, я думаю, исходит из моей неопытности с Javascript. Приложение y в основном, галерея изображений, которая генерирует динамически и позволяет вам взаимодействовать с каждым изображением. На контрольном столе интерактивное меню сливается внутри изображения. В singleTap он должен сделать 2 разных действия в зависимости от того, находится ли мы уже в состоянии «taphold» или нет. Если дело в ARE IN TAPHOLD, оно showld ТОЛЬКО исчезает интерактивное меню внутри изображения. Затем, на следующем singleTap (теперь БЕЗ ТАДЖЕСТВЕННОГО СОСТОЯНИЯ), он отображается внутри изображения. Для этого я фактически использую AJAX. Функция taphold работает нормально, но проблема в том, что действие крана продолжает стрелять, независимо от того, что я пытаюсь включить в код для администрирования, когда он должен запускаться или нет.

Я знаю, что это сложно объяснить и понять, но я не смог найти решение ... Вот файлы, которые я использую.

///////////////////////////////////// TAP.JS //// ///////////////////////////////////////////

$(document).ready(function(){ 

var quojs = $$(document); 
isHold = false; 

var all_spans = $$('#mainwrapper', 'div.showhide').hide(), 
tapToShowImg = false; 

var mobileMenu = $$('.footer-container', '#links-fix').hide(); 

var mainwrapper = $$('#mainwrapper'); 
var homeimgscont = $$('.homeimgscont'); 

var environment = $$.environment(); 

pinchedIn = true; 
pinchedOut = false; 
bottomMenu = false; 
fullScrn = false; 

if ($$.isMobile()) {  

    mobile = false; 

    if (environment.screen.width < 500) { 

     $$('.homeimgscont img.image').addClass('mobile'); 
     mobile = true; 

    } 

}else{ 

mobile = false; 

} 

/*  SINGLE TAP  */ 

$$('.homeimgscont div').on('singleTap', function(f) { 
    f.cancelBubble = true; 
    var allimgs =$$('.image'); 
    console.log(f); 
    switch(isHold){ 

    case true: 
    f.cancelBubble = true; 
    switch(fullScrn){ 
     case true: 
     $$('.imgcont').show(); 
     allimgs.removeClass('hiddenimgs'); 
     break; 
    } 

    $$('.image').removeClass('blur').removeClass('blurmobile'); 
    $$('.imgcont').removeClass('fullscrn'); 
    $$('.homeimgscont .image').removeClass('tappedimg'); 
    mobileMenu.hide(); 

    bottomMenu = false; 

    all_spans.hide(); 
    isHold = false; 

    break; 

    case false: 

    var singleImg = $$(this).children('.image'); 
    var currentImgId = singleImg.attr('id'); 

    $$('.homeimgscont .image').removeClass('tappedimg'); 
    $$(this).children('.image').addClass('tappedimg'); 

    tapToShowImg = true; 

    f.cancelBubble = true; 
    if (f.stopPropagation) f.stopPropagation(); 

    $.ajax ({ 
     type: 'POST', 
     data: {imgid: currentImgId, insingleimg: 'true', user: usr, usrid: usrid}, 
       url: 'http://agus/home/imgtap.php', 
       success: function(data) { 
        $('#main').html(data); 
       } 
    }); 
    break; 

} 
}); 

/* HOLD */ 

quojs.on('hold', '.homeimgscont .image', function(e) { 

var allimgs =$$('.image'); 
var currentimg = $$(this); 
var thisSpan = currentimg.parent().find('.insideimgmenu.showhide'); 
var showImgMenu = currentimg.parent().find('.imgmenu.showhide'); 

all_spans.hide(); 

switch(mobile){ 

case true: 

if (homeimgscont.hasClass('pinchedin')) { 
    $$('.imgcont').hide(); 
    currentimg.parent('.imgcont').addClass('fullscrn').show(); 
    fullScrn = true; 
} 

allimgs.removeClass('blurmobile').removeClass('tappedimg'); 
currentimg.addClass('blurmobile'); 

isShowing = thisSpan.show(), showImgMenu.show(); 

break; 

case false: 

if (environment.screen.width < 500) { 

$$('.imgcont').hide(); 
    currentimg.parent('.imgcont').addClass('fullscrn').show(); 
    fullScrn = true; 

allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs'); 
currentimg.removeClass('hiddenimgs').addClass('blur'); 

isShowing = thisSpan.show(), showImgMenu.show(); 

}else{ 

allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs'); 
currentimg.removeClass('hiddenimgs').addClass('blur'); 

     isShowing = thisSpan.show(), showImgMenu.show(); 

} 

break; 

} 


isHold = true; 
e.cancelBubble = true; 
    e.preventDefault(); 
e.stopPropagation(); 
}); 

}); 

////////////////////////// GALLERY.PHP ///////////////////// /////////////////////////////

<div id="mainwrapper" class="main wrapper clearfix"> 

    <div id="flat" class="homeimgscont pinchedin"> 
    <div class="imgcont one"> 
     <img src="IMAGE"> 
     <div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div> 
     <div class="insideimgmenu showhide animated fadeInUp" style="display: none;"> 
     <span class="titleofpublic">Here goes the title of public.</span> 
     <div class="icons"> 
      <a href="#myModalEgg1" data-toggle="modal" class="eggicon"> 
       <img src="img/egg.png" alt="egg"> 
      </a> 
      <a href="#myModalOTP1" data-toggle="modal" class="hearticon"> 
       <img src="img/otp.png" alt="otp"> 
      </a> 
      <a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });"> 
       <img src="img/like.png" alt="like"> 
      </a> 
      <a href="#myModalMsg1" data-toggle="modal" class="plainicon"> 
       <img src="img/paperplane.png" alt="comment"> 
      </a> 
      </div><!-- .icons --> 

      <div class="addedby"> 
      <span class="addedby-span-text">Added By</span> 
      <span class="addedby-span-name">Rama</span> 
      <div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div>  
      </div> 
     </div><!--.insideimgmenu.showhide--> 

    </div><!--.imgcont--> 


    <div class="imgcont two"> 

     <img src="IMAGE"> 
     <div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div> 
     <div class="insideimgmenu showhide animated fadeInUp" style="display: none;"> 
      <span class="titleofpublic">Here goes the title of public.</span> 
      <div class="icons"> 
       <a href="#myModalEgg2" data-toggle="modal" class="eggicon"> 
        <img src="img/egg.png" alt="egg"> 
       </a> 
       <a href="#myModalOTP2" data-toggle="modal" class="hearticon"> 
        <img src="img/otp.png" alt="otp"> 
       </a> 
       <a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });"> 
        <img src="img/like.png" alt="like"> 
       </a> 
       <a href="#myModalMsg2" data-toggle="modal" class="plainicon"> 
        <img src="img/paperplane.png" alt="comment"> 
       </a> 
       </div><!-- .icons --> 
       <div class="addedby"> 
       <span class="addedby-span-text">Added By</span> 
       <span class="addedby-span-name">Rama</span> 
       <div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div> 
       </div> 

      </div><!--.insideimgmenu.showhide--> 

     </div><!--.imgcont--> 

    </div><!--#flat.homeimgscont.pinchedin--> 
</div><!-- #mainwrapper .main.wrapper.clearfix --> 

Как я уже сказал, галерея им с помощью является quojs, то почему им используя $$ перед некоторыми функциями. Конечно, я делаю некоторые основные ошибки с javascript. Спасибо за помощь!

Answer 1

Во-первых, не используйте переключатель для булевой переменной. В этом случае утверждение if/else более адекватно и интуитивно.

Если вы хотите отменить триггер, вы можете просто использовать return false;. Это выйдет из функции.