jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
更新時(shí)間：2011年12月21日 19:26:22 作者：
jquery其實(shí)本身的事件機(jī)制就很完善了，包括了單擊，雙擊，鼠標(biāo)移入，鼠標(biāo)移出等。但是卻少了一個(gè)做事件。就是鼠標(biāo)右擊事件。當(dāng)然大家也是直接用偵聽(tīng)鼠標(biāo)按下事件，然后通過(guò)if來(lái)判斷執(zhí)行相應(yīng)的函數(shù)。造成鼠標(biāo)右擊事件的效果
因?yàn)樽罱夹g(shù)長(zhǎng)進(jìn)緩慢，也沒(méi)高手帶，只能靠自己了，所以想仿個(gè)WEBQQ來(lái)鍛煉下自己。做之前最好先把必要的東西準(zhǔn)備好。jquery其實(shí)本身的事件機(jī)制就很完善了，包括了單擊，雙擊，鼠標(biāo)移入，鼠標(biāo)移出等。但是卻少了一個(gè)做事件。就是鼠標(biāo)右擊事件。當(dāng)然大家也是直接用偵聽(tīng)鼠標(biāo)按下事件，然后通過(guò)if來(lái)判斷執(zhí)行相應(yīng)的函數(shù)。造成鼠標(biāo)右擊事件的效果。
但是這不是我想要的，我想要的似乎這個(gè)事件可以跟其它事件比如單擊事件一樣?？梢员环奖愕氖褂?，而不需要每次都去判斷。這里通過(guò)編寫jquery插件的形式擴(kuò)展，讓這個(gè)方法可以直接使用$().rightClick();來(lái)使用。
jQuery的插件主要分3種類型
1.封裝對(duì)象方法的插件
（這種插件是將對(duì)象封裝起來(lái)，用于對(duì)通過(guò)選擇器獲取的對(duì)象進(jìn)行操作，也就是這里需要用到的方法）
2.封裝全局函數(shù)的插件
（可以將獨(dú)立的函數(shù)加入到j(luò)query的命名空間下）
3.選擇器插件
（雖然jquery的選擇器已經(jīng)很強(qiáng)大了，但還是會(huì)需要擴(kuò)展一些自己喜歡的選擇器）
其它的一些關(guān)于插件的知識(shí)大家可以自己去查閱相關(guān)資料。這里就直接開(kāi)始講了。
這里是使用的第一種插件類型，先分析下具體的編寫思路。
1.使用鼠標(biāo)右鍵事件后，將禁止所有的系統(tǒng)右鍵菜單功能
2.綁定鼠標(biāo)右鍵事件后，實(shí)際是觸發(fā)鼠標(biāo)按下事件。
3.通過(guò)if來(lái)判斷，如果按下的是右鍵則執(zhí)行參數(shù)，這個(gè)參數(shù)只能是函數(shù)。如果不是右鍵則不執(zhí)行。
相信講到這里，對(duì)jquery很熟悉的也明白要怎么做了。
jquery事件機(jī)制擴(kuò)展，jquery鼠標(biāo)右鍵事件。
/*鼠標(biāo)右鍵插件*/
(function($) {
$.fn.extend({
//定義鼠標(biāo)右鍵方法，接收一個(gè)函數(shù)參數(shù)
"rightClick":function(fn){
//調(diào)用這個(gè)方法后將禁止系統(tǒng)的右鍵菜單
$(document).bind('contextmenu',function(e){
return false;
});
//為這個(gè)對(duì)象綁定鼠標(biāo)按下事件
$(this).mousedown(function(e){
//如果按下的是右鍵，則執(zhí)行函數(shù)
if(3 == e.which){
fn();
}
});
}
});
})(jQuery);
$(document).ready(function(e){
$("body").rightClick(function()(alert("右鍵單擊")));
});
jquery事件機(jī)制擴(kuò)展，jquery鼠標(biāo)右鍵事件。
使用方法跟其它事件一樣
但是這不是我想要的，我想要的似乎這個(gè)事件可以跟其它事件比如單擊事件一樣?？梢员环奖愕氖褂?，而不需要每次都去判斷。這里通過(guò)編寫jquery插件的形式擴(kuò)展，讓這個(gè)方法可以直接使用$().rightClick();來(lái)使用。
jQuery的插件主要分3種類型
1.封裝對(duì)象方法的插件
（這種插件是將對(duì)象封裝起來(lái)，用于對(duì)通過(guò)選擇器獲取的對(duì)象進(jìn)行操作，也就是這里需要用到的方法）
2.封裝全局函數(shù)的插件
（可以將獨(dú)立的函數(shù)加入到j(luò)query的命名空間下）
3.選擇器插件
（雖然jquery的選擇器已經(jīng)很強(qiáng)大了，但還是會(huì)需要擴(kuò)展一些自己喜歡的選擇器）
其它的一些關(guān)于插件的知識(shí)大家可以自己去查閱相關(guān)資料。這里就直接開(kāi)始講了。
這里是使用的第一種插件類型，先分析下具體的編寫思路。
1.使用鼠標(biāo)右鍵事件后，將禁止所有的系統(tǒng)右鍵菜單功能
2.綁定鼠標(biāo)右鍵事件后，實(shí)際是觸發(fā)鼠標(biāo)按下事件。
3.通過(guò)if來(lái)判斷，如果按下的是右鍵則執(zhí)行參數(shù)，這個(gè)參數(shù)只能是函數(shù)。如果不是右鍵則不執(zhí)行。
相信講到這里，對(duì)jquery很熟悉的也明白要怎么做了。
jquery事件機(jī)制擴(kuò)展，jquery鼠標(biāo)右鍵事件。
復(fù)制代碼 代碼如下:
/*鼠標(biāo)右鍵插件*/
(function($) {
$.fn.extend({
//定義鼠標(biāo)右鍵方法，接收一個(gè)函數(shù)參數(shù)
"rightClick":function(fn){
//調(diào)用這個(gè)方法后將禁止系統(tǒng)的右鍵菜單
$(document).bind('contextmenu',function(e){
return false;
});
//為這個(gè)對(duì)象綁定鼠標(biāo)按下事件
$(this).mousedown(function(e){
//如果按下的是右鍵，則執(zhí)行函數(shù)
if(3 == e.which){
fn();
}
});
}
});
})(jQuery);
復(fù)制代碼 代碼如下:
$(document).ready(function(e){
$("body").rightClick(function()(alert("右鍵單擊")));
});
jquery事件機(jī)制擴(kuò)展，jquery鼠標(biāo)右鍵事件。
使用方法跟其它事件一樣
您可能感興趣的文章:
- JQuery右鍵菜單插件ContextMenu使用指南
- jQuery簡(jiǎn)單實(shí)現(xiàn)禁用右鍵菜單
- jquery 簡(jiǎn)短右鍵菜單 多瀏覽器兼容
- jQuery右鍵菜單contextMenu使用實(shí)例
- 深入探討JavaScript、JQuery屏蔽網(wǎng)頁(yè)鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
- 基于jQuery的動(dòng)態(tài)增刪改查表格信息，可左鍵/右鍵提示（原創(chuàng)自Zjmainstay）
- jquery實(shí)現(xiàn)在網(wǎng)頁(yè)指定區(qū)域顯示自定義右鍵菜單效果
- jquery禁用右鍵單擊功能屏蔽F5刷新
- jQuery檢測(cè)鼠標(biāo)左鍵和右鍵點(diǎn)擊的方法
- JQuery模擬實(shí)現(xiàn)網(wǎng)頁(yè)中自定義鼠標(biāo)右鍵菜單功能
相關(guān)文章
js過(guò)濾HTML標(biāo)簽以及空格的思路及代碼
今天要做一個(gè)應(yīng)用--判斷編輯器中文字的個(gè)數(shù)。如果少如20個(gè)字就不能讓其提交。沒(méi)多想，正好周末的時(shí)候看了一下js中正則表達(dá)式的內(nèi)容。很容易就想到了要用正則表達(dá)式來(lái)解決這個(gè)問(wèn)題。雖說(shuō)看了正則表達(dá)式的內(nèi)容是看了，但是畢竟還是剛接接觸，連基本的概念都很模糊，于是只好在網(wǎng)上找到如下的代碼：2013-05-05
JQuery處理json與ajax返回JSON實(shí)例代碼
json數(shù)據(jù)是一種經(jīng)型的實(shí)時(shí)數(shù)據(jù)交互的數(shù)據(jù)存儲(chǔ)方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面我來(lái)給大家介紹jquery處理json數(shù)據(jù)方法2014-01-01
使用jQuery的easydrag插件實(shí)現(xiàn)可拖動(dòng)的DIV彈出框
EasyDrag 是一個(gè)用來(lái)實(shí)現(xiàn)頁(yè)面元素拖拉的 jQuery 插件。接下來(lái)通過(guò)本文給大家介紹使用jQuery的easydrag插件實(shí)現(xiàn)可拖動(dòng)的DIV彈出框，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
jQuery的寫法不同導(dǎo)致的兼容性問(wèn)題的解決方法
今天用jQuery操作table時(shí)，出現(xiàn)了一個(gè)兼容性的問(wèn)題，以前都說(shuō)jQuery的兼容性是絕對(duì)可靠的，今天發(fā)現(xiàn)了這個(gè)bug！2010-07-07
解決jquery異步按一定的時(shí)間間隔刷新問(wèn)題
我想將一個(gè)網(wǎng)頁(yè)上的圖片按一定的時(shí)間間隔刷新，不改變圖片的名稱，我在服務(wù)器端改變圖片的內(nèi)容，以此來(lái)實(shí)現(xiàn)動(dòng)態(tài)的效果2012-12-12
jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jquery瀏覽器滾動(dòng)加載技術(shù)實(shí)現(xiàn)方案
Google閱讀器上有一個(gè)AJAX效果很不錯(cuò)，就是閱讀項(xiàng)目時(shí)不需要翻頁(yè)，瀏覽器滾動(dòng)條往下拉到一定位置時(shí)自動(dòng)加載新的一批項(xiàng)目進(jìn)來(lái)，一直到所有項(xiàng)目加載完為止。對(duì)于我來(lái)說(shuō)再好不過(guò)了，因?yàn)槲液懿幌矚g翻頁(yè)，尤其是輸入頁(yè)碼再定位到頁(yè)。2014-06-06
jQuery實(shí)現(xiàn)在HTML文檔加載完畢后自動(dòng)執(zhí)行某個(gè)事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)在HTML文檔加載完畢后自動(dòng)執(zhí)行某個(gè)事件的方法,結(jié)合實(shí)例形式分析了document的ready()事件自動(dòng)加載執(zhí)行事件的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了jQuery復(fù)合事件用法,結(jié)合具體實(shí)例形式分析了jQuery復(fù)合事件的簡(jiǎn)單定義與使用方法,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery.deferred對(duì)象的使用方法，內(nèi)容很全面，感興趣的小伙伴們可以參考一下2016-03-03