Как изменить кнопку JS, чтобы удерживать нажатой - PullRequest
Новая
       6

Как изменить кнопку JS, чтобы удерживать нажатой

0 голосов
/ 07 сентября 2018

Вот мой код кнопки 

$("#btn_Shiftup,#menufavs_btn_Shiftup").click(function () {             
    user_favourites_add('.group_button_2','#menufavs_btn_Shiftup','Shiftup()');    
});

1 Ответ

0 голосов
/ 07 сентября 2018

Вы можете использовать jQuery mousedown() Метод.

Событие mousedown наступает, когда левая кнопка мыши нажата над выбранным элементом. Метод mousedown() вызывает mousedown event или присоединяет функцию, запускаемую при возникновении события mousedown.

Совет. Этот метод часто используется вместе с методом mouseup(). 

$("#btn_Shiftup,#menufavs_btn_Shiftup").mousedown(function(){
    // Do your things here 
});

Пример и подробную информацию вы можете найти здесь 

var timer = null;
var subject = $("#subject")[0];

var shifter =  function() {
  var newShifterPosition =  subject.style.top ? subject.style.top.split("px")[0] : "100";
  newShifterPosition =  parseInt(newShifterPosition) - 2;
  newShifterPosition = newShifterPosition < 10 ? 100 : newShifterPosition;
  subject.style.top = newShifterPosition + "px";
}


var shiftUp = function() {
   timer = setInterval(function(){
      shifter();    
   }, 200); 
}

var stopShifting = function() {
  timer && clearInterval(timer);
  timer = null;
  $(document).off('mouseup')
}


$(".btn_shiftup").mousedown(function(){
    shiftUp();
    // Stop execution of code when ever a mouse up event happens
    $(document).mouseup(function(){
        stopShifting();
    });

});
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #ffeeff;
}

#subject {
  position: relative;
  display: block;
  width: 25px;
  height: 25px;
  background: #ff000f;
  top: 100px;
  left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div class="container"> 
  <button class="btn_shiftup">Shift Up</button>
  <span id="subject"></span>
</div>
...