如何更改我的js点击按钮以保持按下状态

时间:2018-09-07 12:21:28

标签: javascript jquery mousedown

这是我的按钮代码

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

1 个答案:

答案 0 :(得分:2)

您可以使用jQuery mousedown()方法。

在所选元素上按下鼠标左键时,发生mousedown事件。 mousedown()方法触发mousedown event,或附加一个函数,以在发生mousedown事件时运行。

  

提示:此方法通常与mouseup()方法一起使用。

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

示例和详细信息,您可以找到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>