Question

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

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

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

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

Answer 1

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

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

形成jQuery文档：

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

Answer 2

尝试这样的事情：

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

请参阅this fiddle。

Answer 3

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

现在你想要的是直接将click-listener分配给元素：

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

Answer 4

您希望事件在应用的生命周期内仅触发一次吗？在这种情况下，您可能希望执行以下操作：

//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/

Answer 5

尝试停止事件传播，以便函数仅触发一次

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

jquery mouseup确保只触发一次

5 个答案: