如何將DOM元素綁定到自定義$ .touchpress事件？

我想創建一個名爲touchpress的自定義事件，使用通常的JQuery .bind()可以綁定一個對象。

下面是我目前的工作了touchpress一個按鈕：

$("#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事件綁定到....任何人都想幫助我將這些碎片粘合在一起？

來源

2012-08-06 JonWells

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

來源

2012-08-06 20:59:49 Alexander

這正是我想要得到的！出於好奇可以做$（「span」）。bind（「touchpress」，function（duration）{}）;與其他事件一樣，如點擊？ – JonWells 2012-08-06 21:03:53

@CrimsonChin，不，你需要使用包裝。我更新了版本，看起來好一點 – Alexander 2012-08-06 21:11:13

工作得很好！ – JonWells 2012-08-06 21:21:26

javascript區分大小寫。

你綁定了一個touchPress事件，但隨後觸發了一個touchpress。這些不是同一個事件。

來源

2012-08-06 20:24:50 jbabey

抱歉，只是一個 – JonWells 2012-08-06 20:28:48

事件冒泡升起了dom樹。

因此，如果您將處理程序附加到「myButton」，則需要直接在元素上或該元素的子級上觸發事件。

綁定：將當事件到達綁定了該事件

即觸發功能元素，這將觸發一個功能：從源元素了觸發事件的DOM層次結構，直到頂元素到達或處理程序調用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-06 20:25:29

確定錯字。我但我得到的是我不想將#myButton綁定到touchstart事件，我只想將所有事件作爲事件包裝起來，並且能夠將myButton綁定到touchpress事件。如果這更清楚？ – JonWells 2012-08-06 20:27:50

@CrimsonChin，no – Alexander 2012-08-06 20:37:26

@亞歷山大：哈，好的。假設我有六個按鈕，我想將它們全部綁定到touchpress事件。必須爲每個按鈕計算touchpress。因此，我沒有將他們全部綁定到touchstart事件，而是想創建一個名爲touchpress的新事件。好點？ – JonWells 2012-08-06 20:41:27

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-06 20:31:07

如何將DOM元素綁定到自定義$ .touchpress事件？

回答

相關問題