javascript – 不需要突出显示HTML元素的选择

2023年4月11日 248次阅读

我正在制作一个网站(只是为了好玩),你可以玩游戏SET.现在出现了一个我不明白的间歇性问题.

用户通过点击它们来选择正方形(该板由浮动的DIV元素组成,其中包含图像).单击时,DIV的边框变为黄色.

这里发生的不需要的行为是,当用户点击第一个DIV突出显示它时,另一个div会突出显示(见下文).最糟糕的是,问题只是间歇性地发生,可能每五次用户开始选择一组.我不确定要发布什么代码,因为我真的无法猜出错误的来源是什么.

这是使方块亮起的代码,虽然我完全不确定错误是在这段代码中：

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

以下是问题的屏幕截图：

《javascript – 不需要突出显示HTML元素的选择》

用蓝色突出显示的方块根本不应突出显示.我点击了第三列第二行的正方形,该正方形有一个黄色边框表示它已被点击.

最后,我想我只是希望其他人会有类似的奇怪,不需要的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);添加到相关标签.

点赞