Ideal attribute not to be 'clickable'

Asked

Viewed 991 times

6

Good afternoon. I am making a button that has the function of increasing the quantity of products in the cart. However, when you click it many times, the element is 'colored' as if it were a word or something like that. as in this image:

inserir a descrição da imagem aqui

The ideal for this not to happen would be for it to have a background 'property', right? Thus it would not be possible to 'click' on it. However, I don’t want to take the trouble to do a background for every thing I don’t want this 'problem''.

you know some CSS or something that prevents it from happening?

  • 1

    The title’s a little fuzzy, wouldn’t it: Ideal attribute to be clickable? or did you mean: Ideal attribute not to be selectable?

2 answers

6


You can turn that off with the user-select, which is at the bottom the rule whether or not the user can select page content (which is what happens there).

.button {
  user-select: none;
}

Example:

var contador = (function(el) {
  const mostrador = el.querySelector('.mostrador');
  el.addEventListener('click', function(e) {
    if (!e.target.matches('.button')) return;
    mostrador.innerHTML = Number(mostrador.innerHTML) + Number(e.target.dataset.sinal);
  });
})(document.querySelector('.contador'));
.contador {
  border: 2px solid #333;
  padding: 5px;
  border-radius: 20px;
  display: inline-block;
  text-align: center;
}

.contador>div {
  display: inline-block;
}

.contador .button:active {
  background-color: #aaf;
}

.mostrador {
  width: 30px;
}

.contador .button {
  border-radius: 15px;
  user-select: none;
  background-color: #aaa;
  padding: 5px;
  width: 20px;
  text-align: center;
  cursor: pointer;
}
<div class="contador">
  <div class="button" data-sinal="-1">-</div>
  <div class="mostrador">0</div>
  <div class="button" data-sinal="1">+</div>
</div>

3

Another way to avoid this is through the jQuery below, which also works:

$(elemento).mousedown(function(){ return false; });

The response of @Sergio really is the best. I’m just leaving this alternatively.

Just one note: in the case of the BUTTON tag, it is not selectable by default. The answers will only be useful if you use a DIV button, for example.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.