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

How to bind a DOM element to a custom $.touchpress event?

本文关键字：自定义 touchpress 事件 绑定 DOM 元素      更新时间：2023-09-26

我想创建一个名为touchpress的自定义事件，可以使用通常的JQuery .bind()绑定对象。

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

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

但是我希望能够将任何元素绑定到此事件，并简单地触发触摸按下事件

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

我尝试使用触发器：

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

但不知道该绑定到什么。 我也不知道将触摸启动事件绑定到什么.... 有人想帮我把这些碎片粘在一起吗？

touchpress包装器：

$.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);
});

​

JavaScript 区分大小写。

您绑定了touchPress事件，但随后触发了touchpress。这些不是同一个事件。

HTML：

<div id="main_content"></<div>

JS代码：

document.getElementById('main_content').ontouchstart=onStartFunction;
/* or for multiple elements using jquery*/
$('.myBtns').each(function(){
   this.ontouchstart=onStartFunction;
});
function onStartFunction(e){
      //e.stopPropagation(); // if necessary
      // your code goes here
}

您可以绑定您喜欢的每个事件 OnTouchStart， OnTouchMove， OnTouchEnd 等。如果你使用 e.stopPropagation（），这将防止事件冒泡

事件冒泡上升到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');
相关文章：