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

Posted 2023-03-06

【中文标题】不需要的 HTML 元素突出显示选择

【英文标题】：Unwanted highlighting selection of HTML element

【发布时间】：2016-05-06 11:33:53

【问题描述】：

我正在创建一个网站（只是为了好玩），您可以在其中玩 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);
    
  
);

这是问题的截图：

以蓝色突出显示的方块根本不应该突出显示。我点击了第三列第二行的方块，该方块确实有一个黄色边框表示它被点击了。

最后，我想我只是希望其他人也有类似的经历，奇怪、不需要的 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" ><img class="sprite one empty" id="c0012"  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" ><img class="sprite three empty" id="c2001"  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" ><img class="sprite one solid" id="c0202"  src="/img/02.png"></a>
    </div>
  </div>

等等

【问题讨论】：

你能提供HTML吗？

复制 -> ***.com/questions/7018324/…

【参考方案1】：

如果我理解了这个问题，你可以通过

解决这个问题 添加css 属性user-select:none 将-webkit-tap-highlight-color: rgba(0,0,0,0);添加到相关标签中。

【讨论】：

我不知道禁用突出显示，我想这会起作用，但我并不介意人们通常突出显示框，我只是不希望框在这种意外中突出显示大大地。但是由于我不知道为什么要突出显示这些框，因此禁用突出显示可能是我能做的最好的事情。

禁用所有突出显示会消除不需要的突出显示，但我更愿意以不那么极端的方式解决问题。

我刚刚更新了我的答案。检查这是否能解决您的问题。