我正在制作一个网站(只是为了好玩),您可以在其中玩 SET 游戏。现在出现了一个我不明白的间歇性问题。
用户通过单击选择方 block (面板由 float 的 DIV 元素组成,元素内部有图像)。单击时,DIV 的边框变为黄色。
此处发生的不良行为是,当用户单击第一个 DIV 以突出显示它时,另一个 div 会突出显示(见下文)。最糟糕的是问题只是间歇性地发生,可能每五次用户开始选择一个集合就有一次。我不确定要发布什么代码,因为我真的猜不出错误的来源是什么。
下面是让方 block 亮起来的代码,虽然我一点也不确定错误出在这段代码中:
var myDown = isIOS ? "touchstart" : "mousedown";
$(".cell").on(myDown,function(event) {
if (declared == true) {
if ($(this).hasClass('on')) {
$(this).removeClass('on');
} else {
if ($('.cell.on').length <3) {
$(this).addClass('on');
}
}
if ($('.cell.on').length == 3) {
$submitButton.addClass('ready');
setTimeout(delayedSubmit,400);
}
}
});
这是问题的截图:
以蓝色突出显示的正方形根本不应突出显示。我点击了第二行第三列的方 block ,那个方 block 确实有黄色边框,表明它被点击了。
最后,我想我只是希望其他人对奇怪的、不需要的 DIV 突出显示有类似的经历,以便提出可能的原因。
编辑:这是一些 HTML
<div id="board" class="">
<div id="A1" class="cell">
<div class="box">
<a class="stretchy no-limit" href="#"><img class="spacer" src="/img/spacer.png" alt="spacer"><img class="sprite one empty" id="c0012" alt="card" src="/img/12.png"></a>
</div>
</div>
<div id="B1" class="cell">
<div class="box">
<a class="stretchy no-limit" href="#"><img class="spacer" src="/img/spacer.png" alt="spacer"><img class="sprite three empty" id="c2001" alt="card" src="/img/01.png"></a>
</div>
</div>
<div id="C1" class="cell">
<div class="box">
<a class="stretchy no-limit" href="#"><img class="spacer" src="/img/spacer.png" alt="spacer"><img class="sprite one solid" id="c0202" alt="card" src="/img/02.png"></a>
</div>
</div>
等等
最佳答案
如果我理解这个问题,你可以通过以下方式解决这个问题
- 添加一个
css
属性user-select:none
- 添加
-webkit-tap-highlight-color: rgba(0,0,0,0);
到相关标签。
关于javascript - 不需要的突出显示 HTML 元素的选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35072554/