Javascript 事件触发和can'；我们无法避免发生这种情况

我是Javascript新手，我正在开发一个webapp。我正在使用quojs，一个用于触觉手势的库，但我认为我的问题来自于我对Javascript的缺乏经验。应用程序y基本上是一个动态生成的图像库，允许您与每个图像交互。在taphold上，一个交互式菜单合并到图像中。在singleTap上，它应该根据我们是否已经处于“taphold状态”进行两种不同的操作。如果情况是我们在TAPHOLD，它只显示图像中的交互菜单。然后，在下一次单点点击（现在没有点击保持状态）时，它显示进入图像内部。为此，我实际上在使用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();
});

});

<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 -->

$（文档）.ready（函数（）{
var quojs=$$（文档）；
isHold=假；
var all_span=$$（'mainwrapper'，'div.showhide'）.hide（），
tapToShowImg=false；
var mobileMenu=$$（'.footer container'，'#links fix'）.hide（）；
var mainwrapper=$$（“#mainwrapper”）；
var homeimgscont=$$（'.homeimgscont'）；
var-environment=$$.environment（）；
pinchedIn=真；
pinchedOut=false；
bottomMenu=false；
fullScrn=false；
如果（$$.isMobile（））{
mobile=false；
if（environment.screen.width<500）{
$$（'.homeimgscont img.image'）.addClass（'mobile'）；
移动=真；
}
}否则{
mobile=false；
}
/*单抽头*/
$$（'.homeimgscont div'）。打开（'singleTap'，函数（f）{
f、 取消气泡=真；
var allimgs=$$（'.image'）；
控制台日志（f）；
开关（iHold）{
大小写正确：
f、 取消气泡=真；
开关（fullScrn）{
大小写正确：
$$（'.imgcont'）.show（）；
allimgs.removeClass（“hiddenimgs”）；
打破
}
$$（'.image'）.removeClass（'blur'）.removeClass（'blurmobile'）；
$$（'.imgcont'）.removeClass（'fullscrn'）；
$$（'.homeimgcont.image'）.removeClass（'tappedimg'）；
mobileMenu.hide（）；
bottomMenu=false；
所有_span.hide（）；
isHold=假；
打破
案例错误：
var singleImg=$$（this.children（'.image'）；
var currentImgId=singleImg.attr（'id'）；
$$（'.homeimgcont.image'）.removeClass（'tappedimg'）；
$$（this）.children（'.image'）.addClass（'tappedimg'）；
tapToShowImg=true；
f、 取消气泡=真；
如果（f.stopPropagation）f.stopPropagation（）；
$.ajax({
键入：“POST”，
数据：{imgid:currentImgId，insingleimg:'true'，用户：usr，usrid:usrid}，
网址：'http://agus/home/imgtap.php',
成功：功能（数据）{
$（'#main'）.html（数据）；
}  
});
打破
}
});
/*持有*/
qoojs.on（'hold'，'homeimgcont.image'，函数（e）{
var allimgs=$$（'.image'）；
var currentimg=$$（此值）；
var thisSpan=currentimg.parent（）.find（'.insideimgmenu.showhide'）；
var showImgMenu=currentimg.parent（）.find（'.imgmenu.showhide'）；
所有_span.hide（）；
交换机（移动）{
大小写正确：
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（）；
打破
案例错误：
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（）；
}否则{
allimgs.removeClass（'blur'）.removeClass（'tappedimg'）.addClass（'hiddenimgs'）；
currentimg.removeClass（'hiddenimgs'）.addClass（'blur'）；
isShowing=thisSpan.show（），showImgMenu.show（）；
}
打破
}  
isHold=true；
e、 取消气泡=真；
e、 预防默认值（）；
e、 停止传播（）；
});
});

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

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

});

<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时犯了一些基本的错误。

---

谢谢从现在起的每一个帮助

首先，不要对布尔变量使用开关。在这种情况下，if/else语句更为充分和直观

---

如果要取消触发器，可以使用

返回false。这将退出函数
 谢谢你的回答！我不知道if/else的便利性。我的问题仍然存在，我认为我没有把命令放在正确的地方来创造魔法。如何将内部链接与tap事件隔离？因为当我点击两次里面的链接（比如ex的like按钮）时，父div的tap事件就会触发。。。对不起，我有点搞砸了！