Ideal attribute to not be 'clickable'

Question

Ideal attribute to not be 'clickable'

Navigation

#1 by (6 votes)
#2 by (3 votes)

6

Good afternoon. I'm making a button that has the function of increasing the amount of products in the cart. However, by clicking many times on it, the element becomes as 'colored' as if it were a word or something. as in this image:

The ideal for this would not happen if he had a 'background' property, right? So it would not be possible to 'click' on it. However, I do not want to have the hard work to make a background for every thing I do not want that 'problem'.

Do you know any CSS or something that prevents it from happening?

html jquery css css3

asked by anonymous 16.08.2017 / 20:23

2 answers

3

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

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

The answer from @Sergio is really the best. I'm just leaving this as an alternative.

Just a 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.

17.08.2017 / 00:07

Which DBMS do I use so it can be installed on the client computer to run a C # application? Why is the expression (double.MinValue == double.MinValue + 1) true?

score 6 · Accepted Answer

You can turn it off with user-select , which is in the background the rule that allows the user to select content from the page (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>