javascript - 如何使用 jQuery 长按？

Question

我正在使用数据表插件并使用它进行点击：

$('.datatable').on('click', 'img#openpli-playlist', function(e) {
    alert("You clicked OPENPLI ICON!");
});

现在我需要使用 jQuery 插件 longclick 并使用它：

$('.datatable').longClick(function(e) {
    alert("You clicked OPENPLI ICON!");
},1000);

所以问题是如何将选择器添加到 longclick 我尝试这个选择器但不起作用：

$('.datatable img#openpli-playlist').longClick(function(e) {
    alert("You clicked OPENPLI ICON!");
},1000);

有人可以给我解决方案，为什么这不起作用？

谢谢

Answer 1

简单的修复将是：

var tmr = 0;
$(element).mousedown(function () {
  tmr = setTimeout(function () {
    alert("You clicked for 1 second! Wow!");
  }, 1000);
}).mouseup(function () {
  clearTimeout(tmr);
});

现在这也可以在委托中使用：

var tmr = 0;
$(static_parent).on("mousedown", element, function () {
  tmr = setTimeout(function () {
    alert("You clicked for 1 second! Wow!");
  }, 1000);
}).on("mouseup", element, function () {
  clearTimeout(tmr);
});

您的解决方案：

var tmr = 0;
$('.datatable').on('mousedown', 'img#openpli-playlist', function(e) {
  tmr = setTimeout(function () {
    alert("You clicked OPENPLI ICON!");
  }, 1000);
}).on('mouseup', 'img#openpli-playlist', function(e) {
  clearTimeout(tmr);
});

作为对先前答案的改进，您可以通过这种方式区分单击和长按：

var tmr = 0;
var islong = 0;

$(element)
  .mousedown(function () {
    tmr = setTimeout(function () {
      // Handle the long-press
      alert("You clicked for 1 second!");
      console.log("You clicked for 1 second!");
      islong = 1;
    }, 1000);
  })
  .mouseup(function () {
    if (islong == 0) {
      // Handle the click
      alert("This is a click!");
      console.log("This is a click!");
    }
    islong = 0;
    clearTimeout(tmr);
  });