javascript - 单击图像3秒钟后触发功能

我的网络上有一个不可见的按钮，当按下按钮3秒钟时，我希望它做某事。

到目前为止，我已经尝试过了：

$("#basicChn").on({
  mousedown: function() {
    $(this).data('timer', setTimeout(function() {
      launchBasicChannel();
    }, 3000));
  },
  mouseup: function() {
    clearTimeout($(this).data('timer'));
  }
});

function launchBasicChannel() {
  tts.say("Basic channel has been launched");
}

.recRojo {
  position: absolute;
  right: -30px;
  top: -30px;
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="imagenes/index/Rectangulo.png" class="recRojo" alt="btnSecreto" id="basicChn">

但是，它不起作用。关于如何解决它的任何想法？

最佳答案

或者您可以这样写。

// hold mouse on the hidden object for 3 seconds to launch
$("#hiddenImage").on("mousedown", function(e) {

    clearTimeout(this.downTimer); // clear the timer

    // start the timer for 3 seconds
    this.downTimer = setTimeout(function() {
        launchBasicChannel();
    }, 3000);

}).mouseup(function(e) {
    clearTimeout(this.downTimer); // clear the timer
});

function launchBasicChannel() {
  console.log("Basic channel has been launched");
}

#hiddenImage {
  position: absolute;
  right: -30px;
  top: -30px;
  /*visibility: hidden;*/
  background: red;
  width: 100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="hiddenImage"></div>

关于javascript - 单击图像3秒钟后触发功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57424834/