事件触发和can'Don’避免发生

我是Javascript的新手，正在开发一个Web应用程序。我正在使用quojs，一个tactil手势库，但我认为我的问题来自于我对Javascript缺乏经验。应用程序y基本上是一个图像库，它可以正常生成，并允许您与每张图像进行交互。点击时，一个交互式菜单会合并到图像中。在singleTap上，它应该做出两个不同的动作，这取决于我们是否已经处于"taphold状态"。如果情况是我们处于TAPHOLD，它只显示图像中的交互式菜单。然后，在下一个Single Tap（现在为WITH TAPHOLD STATE）上，它显示进入图像内部。为此，我实际上使用了AJAX。taphold函数运行良好，但问题是，无论我试图在代码中放入什么来管理它，当它必须触发或不触发时，tap操作都会一直触发。

我知道这有点难以解释和理解，但我还找不到解决办法。。。这是我正在使用的文件。

///////////////////////////////////////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上犯了一些基本错误。感谢从现在起的每一次帮助！！！