Unwanted highlighting selection of HTML element

Question

I am making a website (just for fun) where you can play the game SET. Now an intermittent problem has cropped up which I do not understand.

The user selects squares by clicking on them (the board is made up of floated DIV elements with images inside of them). When clicked, the border of the DIV becomes yellow.

The unwanted behavior that is happening here is that when a user clicks on the first DIV to highlight it, another div becomes highlighted (see below). The worst part is that the problem happens only intermittently, maybe once out of every five times a user begins selecting a set. I am not sure what code to post as I really cannot guess what is the source of the error.

Here is the code that makes squares light up, although I am not at all sure that the error is in this code:

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

Here is a screenshot of the problem:

The square that is highlighted in blue should not be highlighted at all. I clicked on the square in the third column, second row, and that square does have a yellow border to indicate that it was clicked.

In the end I guess I'm just hoping someone else will have had a similar experience with weird, unwanted DIV highlighting so as to suggest a possible cause.

EDIT: Here is a bit of the 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>

etc.

Dupe -> http://stackoverflow.com/questions/7018324/how-do-i-stop-highlighting-of-a-div-element-when-double-clicking-on — adeneo, Jan 28 '16 at 21:45

Mosh Feu · Accepted Answer · 2016-01-31T23:12:14.947

1

If I understand the problem you can solve this issue by

Add a css property user-select:none
Add -webkit-tap-highlight-color: rgba(0,0,0,0); to the relevant tag.

edited Jan 31 '16 at 23:12

answered Jan 28 '16 at 21:43

Mosh Feu

28,354
16
88
135

I didn't know about disabling highlighting, and I suppose that would work, but I don't really mind people highlighting boxes in general, I just don't want boxes to get highlighted in this unexpected way. But since I don't know why the boxes are being highlighted, disabling highlighting may be the best I can do. – wbruntra Jan 28 '16 at 22:01
Disabling all highlighting would get rid of unwanted highlighting, but I would prefer to solve the problem in a less extreme way. – wbruntra Jan 31 '16 at 23:07
I just was updated my answer. Check if that's solve your problem. – Mosh Feu Jan 31 '16 at 23:13

Unwanted highlighting selection of HTML element

1 Answers1