Запретить выделение при двойном нажатии

Question

Требуется, чтобы при двойном нажатии, текст в квадрате не выделялся.

function t5() {
    clearSelection();
    let x =  document.querySelector('.div-5');
    if(this.classList.contains('active')){
        this.classList.remove('active')
    }
else{
    this.classList.add('active')
}
        

}

function clearSelection() {
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
    } else { 
      document.selection.empty();
    }
  }

document.querySelector('.div-5').ondblclick = t5;

.container  {
    width: 100%;
}

section {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #444;
}

.block {
    width: 75px;
    height: 75px;
    margin: 25px;
    border: 2px solid #333;
}

.active {
    background: orange;
}

.hide {
    display: none;
}

 <section>
            <p><b>Task 5.</b></p>
            <p>Дан блок .div-5.active. Добавьте на него событие двойной клик, по которому удалется класс
                active если он есть и добавляется если такого класса нет. </p>
            <div class="block div-5 active">task-5</div>
            <div class="out-5">
            </div>
        </section>

Answer 1

Просто отключаете выделение текста.

function t5() {
    clearSelection();
    let x =  document.querySelector('.div-5');
    if(this.classList.contains('active')){
        this.classList.remove('active')
    }
else{
    this.classList.add('active')
}
        

}

function clearSelection() {
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
    } else { 
      document.selection.empty();
    }
  }

document.querySelector('.div-5').ondblclick = t5;

.container  {
    width: 100%;
}

section {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #444;
}

.block {
    width: 75px;
    height: 75px;
    margin: 25px;
    border: 2px solid #333;
}

.active {
    background: orange;
}

.hide {
    display: none;
}

.unselectable {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

 <section>
            <p><b>Task 5.</b></p>
            <p>Дан блок .div-5.active. Добавьте на него событие двойной клик, по которому удалется класс
                active если он есть и добавляется если такого класса нет. </p>
            <div class="block div-5 active">
              <p class="unselectable">task-5</p>
            </div>
            <div class="out-5">
            </div>
</section>

Answer 2

Что-то намудрили Вы с добавлением/удалением (по сути, переключением) класса. Если нужно только преключать, то правильное решение - classList.toggle().

По поводу запрета выделения - добавьте нужному блоку user-select: none;.

function t5() {
  clearSelection();
  this.classList.toggle('active');
}

function clearSelection() {
  if (window.getSelection) {
    window.getSelection().removeAllRanges();
  } else {
    document.selection.empty();
  }
}

document.querySelector('.div-5').ondblclick = t5;

.container { width: 100%; }

section {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #444;
}

.block {
  width: 75px;
  height: 75px;
  margin: 25px;
  border: 2px solid #333;
}

.active { background: orange; }

.hide { display: none; }

.div-5 { user-select: none; }

<section>
  <p><b>Task 5.</b></p>
  <p>Дан блок .div-5.active. Добавьте на него событие двойной клик, по которому удалется класс active если он есть и добавляется если такого класса нет. </p>
  <div class="block div-5 active">task-5</div>
  <div class="out-5"></div>
</section>

Answer 3

Это не уберет выделение (будет работать копировани и много другое). Но визуально будет работать верно. Судя по специфике задачи это то, что вы искали.

.block::selection { 
    background: none;
}

p.s. Используйте лучше addEventListener, он более гибкий

БЛОГ НА HUSL

Запретить выделение при двойном нажатии

Ответы (3 шт):