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

236

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; 
}