Prevent div marked as selected (google chrome) when clicking multiple times in a child

Question

Lets say I have this markup

<div id="parent">
    <h2>My Title</h2>
    <div>
          <a class="button">prev</a>
          <ul>
               <li><a>First child <span></a></li>
               <li><a> child</a></li>
               <li><a> child</a></li>
               <li><a> child</a></li>
               <li><a>last child</a></li>
          </ul>
          <a class="button">prev</a>
    </div>
</div>

Wich with some styling might look like this:

Problem is that if I hit multiple timems (and fast, like a double-click) then (at least in chrome) the whole parent is like marked as if the text where selected:

Any idea how I can prevent this?

For example same thing with outline:1 to remove the dots arownd a clicked element.

Answer 1

I think you need to make your element to not be selectable as this:

#parent{
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
 }

copied from this answer