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