我是Javascript的新手，我正在开发一个webapp。我正在使用quojs，一个用于tactil手势的库，但我认为，我的问题来自于我对Javascript的经验不足。该应用程序基本上是一个图像库，可以生成dinamically，并允许您与每个图像进行交互。在taphold上，交互式菜单在图像内合并。在singleTap上，如果我们已经处于“taphold状态”，它应该做出2个不同的动作。如果我们在TAPHOLD的情况下，它只显示图像内的交互式菜单。然后，在下一个singleTap（现在没有TAPHOLD STATE），它showld进入图像内部。为此，我实际上使用的是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犯了一些基本的错误。 感谢从现在开始的每一次帮助!!!
答案 0 :(得分：0)
首先，不要使用开关作为布尔变量。在这种情况下，if / else语句更加直观。
如果要取消触发器，可以使用return false;。这将退出该功能。