0

我想创建一个自定义事件，称为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 事件绑定到什么......有人想帮我把这些东西粘在一起吗？

4

4 回答 4

1

一个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);
});

​</p>

于 2012-08-06T20:59:49.407 回答
0

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() 这将防止事件冒泡

于 2012-08-06T20:31:07.837 回答
0

javascript 区分大小写。

你绑定一个touchPress事件，然后触发一个touchpress. 这些不是同一个事件。

于 2012-08-06T20:24:50.470 回答
0

事件冒泡上升到 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');
于 2012-08-06T20:25:29.633 回答