jQuery實現(xiàn)獲取綁定自定義事件元素的方法
更新時間:2015年12月02日 16:33:28 作者:lsjlnd
這篇文章主要介紹了jQuery實現(xiàn)獲取綁定自定義事件元素的方法,涉及jQuery方法重載、事件綁定及元素操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)獲取綁定自定義事件元素的方法。分享給大家供大家參考,具體如下:
(function ($) { // 自定義itemtab事件
$.fn.bind = function(types, data, fn) { // 重載jQuery.fn.bind方法,用來截獲綁定自定義事件的元素
if(typeof types == 'string' && 'itemtab' == types) {
var itemTouchStart = -1; // touchstart位置
var itemTouchMove = -1; // touchend位置,值為-1時表示未觸發(fā)
var itemTriggerDistance = 0; // 拖動距離閥值,若大于該值則為拖動列表,若小于等于該值則為點擊列表項
var itemMoved = false; // 列表是否為拖動狀態(tài)
$(this).bind('touchstart', function (event) {
if(!event.originalEvent.touches.length) return true;
itemMoved = false;
itemTouchStart = event.originalEvent.touches[0].pageX; // 記錄起始位置
}).bind('touchmove', function (event) {
if(!event.originalEvent.touches.length) return true;
itemTouchMove = event.originalEvent.touches[0].pageX; // 當(dāng)前拖動位置
//console.log('touchmove:', itemTouchStart, itemTouchMove, itemMoved);
if(Math.abs(itemTouchMove - itemTouchStart) > itemTriggerDistance) {
itemMoved = true; // 列表被拖動
}
}).bind('touchend', function (event) {
//console.log('itemMoved:', itemMoved);
if(itemMoved) { // 列表被拖動過,非點擊操作
return true;
}
$(this).trigger('itemtab'); // 觸發(fā)自定義事件
});
}
return this.on( types, null, data, fn ); // 這種做法具有侵入性,多個類似的代碼會相互覆蓋,可采用深度復(fù)制方式調(diào)用原$.fn.bind方法
}
})(jQuery);
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
easyui取消表單實時驗證,提交時統(tǒng)一驗證的簡單實例
下面小編就為大家?guī)硪黄猠asyui取消表單實時驗證,提交時統(tǒng)一驗證的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
Jquery遍歷checkbox獲取選中項value值的方法
這篇文章主要介紹了Jquery遍歷checkbox獲取選中項的value值,需要的朋友可以參考下2014-02-02
JQuery中html()方法使用不當(dāng)帶來的陷阱
html方法當(dāng)不傳參數(shù)時用來獲取元素的html內(nèi)容2011-04-04
jQuery 如何實現(xiàn)一個滑動按鈕開關(guān)
本文給大家分享一段jquery代碼實現(xiàn)滑動按鈕開關(guān)的效果,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的的朋友參考下2016-12-12
PHP+MySQL+jQuery隨意拖動層并即時保存拖動位置實例講解
這篇文章主要介紹了PHP+MySQL+jQuery隨意拖動層并即時保存拖動位置的實現(xiàn)方法,感興趣的小伙伴們可以參考一下2015-10-10

