jquery mouseup确保只触发一次

jquery mouseup ensure firing only once

本文关键字：一次 mouseup 确保 jquery      更新时间：2023-09-26

我对如何确保鼠标只启动一次感到困惑。

function cropPet(){
  $("#canvas").on("mouseup", function(){
    console.log("hello world");
  });
}

例如，当我点击一个按钮3次时，cropPet函数被触发，每次我在#canvas上点击mouseup时，我的控制台中都会出现3次hello world。我曾尝试在on()之前附加off()，但它不起作用，我的控制台中根本没有hello world（不启动？）。这是我的脚本，附带off()。

function cropPet(){
  $("#canvas").off("mouseup").on("mouseup", function(){
    console.log("hello world");
  });
}

您可以使用.one()来确保事件只触发一次：

$("#canvas").one("mouseup", function(){
    console.log("hello world");
});

形成jQuery文档：

将处理程序附加到元素的事件。每个元素每个事件类型最多执行一次处理程序。

试试这样的东西：

function cropPet(){
  $("#canvas").on("mouseup", function(){
    console.log("hello world");
    $("#canvas").off("mouseup");
  });
}

看看这把小提琴。

脚本中存在概念错误。函数cropPet()在执行时定义了$("#canvas")上的单击侦听器。因此，当您执行该函数3次时，3次单击侦听器，因此每次单击该元素时都会执行3次警报消息。

现在，您想要的是直接将点击侦听器分配给元素：

function cropPet(){
    console.log("hello world");
}
$("#canvas").on("mouseup", function(){
    cropPet();
});

是否希望事件在应用程序的生命周期内只触发一次？在这种情况下，你可能想做这样的事情：

//Function to remove the event
function removeMouseEvent(item) {
    $(item).off();
}
//Attach The Event
$("#canvas").on("mouseup", function () {
    console.log("hello world");
    removeMouseEvent(this);
});

这是一把小提琴，展示了代码的作用：http://jsfiddle.net/amspianist/Dc6tb/1/

尝试停止事件传播，使函数只触发一次

 $("#canvas").on("mouseup", function(e){
    e.stopPropagation();
    console.log("hello world");
 });
相关文章：