Événement de tir et ne peut pas éviter

Question

Je suis nouveau avec Javascript, et je développe une webapp. J'utilise le quojs, une bibliothèque pour les gestes tactile, mais mon problème, je pense, vient de mon inexpérience avec Javascript. L'application est essentiellement une galerie d'images qui génère des dinamiques et vous permet d'interagir avec chaque image. Sur taphold, un menu interactif fusionne à l'intérieur de l'image. Sur singleTap, il faut faire 2 actions différentes selon que nous sommes déjà en "taphold state" ou pas. Si c'est le cas, nous sommes en TAPHOLD, cela montre seulement le menu interactif à l'intérieur de l'image. Ensuite, sur le prochain singleTap (maintenant SANS TAPHOLD STATE), il apparaît à l'intérieur de l'image. Pour cela, j'utilise actuellement AJAX. La fonction taphold fonctionne bien, mais le problème est que l'action du robinet continue de tirer, peu importe ce que j'essaie de mettre dans le code pour administrer quand il doit déclencher ou non.

Je sais que c'est un peu difficile à expliquer et à comprendre, mais je ne pouvais pas encore trouver la solution ... Voici les fichiers que j'utilise.

///////////////////////////////////// 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(); 
}); 

}); 

//////////////////////////// GALERIE.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 --> 

Comme je l'ai dit, la galerie im en utilisant est quojs, thats pourquoi im en utilisant $$ avant certaines fonctions. Bien sûr, je fais quelques erreurs de base avec le javascript. Merci toute aide depuis maintenant !!!

Answer 1

Tout d'abord, essayez de ne pas utiliser un commutateur pour une variable booléenne. Une instruction if/else est plus adéquate et intuitive dans ce cas. Si vous souhaitez annuler le déclencheur, vous pouvez simplement utiliser un return false;. Cela va sortir de la fonction.