Как сделать активный клик на javascript?

51
22 июля 2018, 22:10

У меня есть див, хочу сделать так, чтобы при нажатии на него появлялась полоска (hr), но выполнить это нужно так, чтобы полоска появлялась только на время нажатия (типа псевдокласса :active в CSS)

Т.е. пока проходит нажатие полоска должна висеть, как нажатие на кнопку прекратилось - полоска исчезает. Как это сделать на java script/jquery?

<div id="first">

#first {width: 100%; height: 15%;}
Answer 1

Если в кратце: на событие onmousedown - показываем hr, на событие onmouseup убираем. Лучше даже сделать это с помощью css добавляя диву просто класс

first.onmousedown = function () { 
  this.classList.add('active'); 
} 
 
first.onmouseup = function () { 
  this.classList.remove('active'); 
}
hr { 
  display: none; 
} 
 
#first.active + hr { 
  display: block; 
} 
 
#first { 
  width: 100px; 
  height: 60px; 
  background: #333; 
}
<div id='first'></div> 
<hr />

Answer 2

Если я правильно понял вашу (странную) затею, то так:

$(document).on('mousedown', '.new-block', function() { 
  $(this).find('hr').css('opacity', 1); 
}); 
$(document).on('mouseup', '.new-block', function() { 
  $(this).find('hr').css('opacity', 0); 
});
.new-block { 
  width: 100%; 
  height: 15%; 
} 
 
hr { 
  opacity: 0; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="new-block"> 
  Первый<hr/> 
</div> 
 
<div class="new-block"> 
  Второй<hr/> 
</div> 
 
<div class="new-block"> 
  Трейтий<hr/> 
</div>

Answer 3

Можно обойтись без скриптов, добавив атрибут tabindex, тогда будет работать псевдокласс :active

hr { 
  display: none; 
} 
 
#first:active + hr { 
  display: block; 
} 
 
#first { 
  width: 100px; 
  height: 60px; 
  background: #333; 
   
  outline: none; 
}
<div id='first' tabindex></div> 
<hr>

READ ALSO
Что именно отвечает за выделение текста?

Что именно отвечает за выделение текста?

Мне нужно, чтобы по клику текст копировался, но не выделялсяНе могу понять какой метод отвечает за выделение

57
Как не дать добавить значение?

Как не дать добавить значение?

У меня есть БД, в ней есть таблица запись, в самой таблице, есть колонка "Время" Как мне сделать, чтобы нельзя было добавить одитнаковое времяЯ...

51
Сериализация в XML WPF

Сериализация в XML WPF

Подскажите пожалуйста, что я делаю не правильноПробую сохранять в xml файле получается, но обратно в таблицу загрузка не происходит, подскажите...

50