Javascript 如何将DOM元素绑定到自定义$.touchpress事件？

我想创建一个名为

touchpress

的自定义事件，可以使用常用的JQuery

.bind（）

将对象绑定到该事件

以下是我目前如何计算按钮的触摸按下：

$("#myButton").bind("touchstart", function() {
    var startTime = new Date().getTime();
}).touchend(function() {
    var duration = new Date().getTime() - startTime;
});

但我希望能够将任何元素绑定到此事件，并简单地触发一个touchpress事件

$("#myButton").bind("touchpress", onTouchPress);

我试图使用触发器：

$(document).trigger("touchpress", duration);

---

但我不知道该把它绑在什么东西上。我也不知道将touchstart事件绑定到什么。。。。有人想帮我把这些部分粘在一起吗？

javascript区分大小写

---

绑定一个

touchPress

事件，然后触发一个

touchPress

。这些事件不是同一个事件。

事件冒泡出现在dom树上

因此，如果将处理程序附加到“myButton”，则需要直接在元素或该元素的子元素上触发事件

绑定：附加一个函数，该函数将在事件到达将该函数绑定到该事件的元素时触发

触发：从源元素向上触发事件，直到到达顶层元素或处理程序调用event.stopPropagation（）

例如：

dom结构：

document->body->div->button[id=myButton]

可以在dom中的任何元素上绑定任何事件

如果从按钮[id=myButton]激发，则事件冒泡

button[id=myButton]->div->body->document

就你而言：

$("#myButton").trigger("touchpress"); //this triggers the handler that will respond to touchpress

如果您不想知道触发事件所需的元素的来源，可以在这些元素中添加一个标记类，并手动触发每个元素上的事件

$('.has-touchpress-handler').trigger('touchpress'); 

HTML:

您可以将您喜欢的每个事件绑定到ontouchstart、ontouchmove、ontouchend等。

---

如果使用e.stopPropagation（），这将防止事件冒泡A

touchpress

wrapper:

$.fn.touchpress = function(fn){
  var startTime;
  return this.on({
    "touchpress": fn,
    "touchstart": function(){
      startTime = new Date().getTime();
    },
    "touchend": function(){
      var duration = new Date().getTime() - startTime;
      $(this).trigger("touchpress", duration);
    }
  });
};

用法：

$("span").touchpress(function(evt, duration){
  console.log(duration);
});

---

​

嗯。我想，但我的意思是，我不想将#myButton绑定到touchstart事件，我只想将所有这些打包为一个事件，并能够将myButton绑定到touchpress事件。如果这更清楚的话？@Alexander:哈，好的。假设我有六个按钮，我想把它们都绑定到touchpress事件。必须计算每个按钮的触摸压力。因此，我不想将它们都绑定到touchstart事件，而是想创建一个名为touchpress的新事件。还有更好的吗？这正是我想说的！出于好奇，是否可以执行$（“span”）.bind（“touchpress”，function（duration）{}）；与其他事件一样，如单击？@CrimsonChin，不，您需要使用包装器。我更新了版本，可能看起来更好一些

$.fn.touchpress = function(fn){
  var startTime;
  return this.on({
    "touchpress": fn,
    "touchstart": function(){
      startTime = new Date().getTime();
    },
    "touchend": function(){
      var duration = new Date().getTime() - startTime;
      $(this).trigger("touchpress", duration);
    }
  });
};

$("span").touchpress(function(evt, duration){
  console.log(duration);
});