提问者:小点点

在div上的活动和保持操作不起作用


我有一个带有操作的

。 按压时工作良好,但如果按住,则拖动到
的外侧并释放,则不会触发操作。

我怎么解决这个? 请看下面的代码。

null

function my_btnpressed(){
    console.log("Button pressed.!")
}
#my_btn{
  width:300px;
  height:120px;
  background-color:cyan;
  
}
#my_btn:active{
  background-color:green;
}

.btn{
  display: flex;
    justify-content: center;
    align-items: center;
}
<div id="my_btn" class="btn" onclick="my_btnpressed()"> Click Me! </div>

null

JS小提琴样本


共1个答案

匿名用户

当您按下并释放按钮时,会激发click事件。 如果要在按钮按下时触发事件,请使用mousedown事件而不是click事件。 当您按下div上的按钮时,会激发mousedown事件,它不会像click事件那样等待您释放按钮。

null

function my_btnpressed() {
  console.log("Button pressed.!")
}
#my_btn {
  width: 300px;
  height: 120px;
  background-color: cyan;
}

#my_btn:active {
  background-color: green;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="my_btn" class="btn" onmousedown="my_btnpressed()"> Click Me! </div>