成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

綁定右鍵事件

maxmin / 427人閱讀

摘要：右鍵單擊鼠標(biāo)后會出現(xiàn)一個菜單，實現(xiàn)這個功能一事件單擊右鍵觸發(fā)事件定義和用法綁定該事件移除該事件語法參數(shù)描述可選。任意類型傳遞給事件處理程序的參數(shù)對象。類型事件觸發(fā)時執(zhí)行的函數(shù)。

右鍵單擊鼠標(biāo)后會出現(xiàn)一個菜單，實現(xiàn)這個功能

一. contextmenu 事件

單擊右鍵觸發(fā) contextmenu 事件

1.定義和用法

綁定該事件 .on( "contextmenu", handler )
移除該事件 .off( "contextmenu" )

2.語法

$(selector).contextmenu( [eventData ], handler )

3.參數(shù)描述

eventData 可選。 任意類型 傳遞給事件處理程序的參數(shù)對象。
handler 可選。 Function類型 事件觸發(fā)時執(zhí)行的函數(shù)。

二. 顯示右側(cè)菜單
1.鼠標(biāo)點擊事件(阻止鼠標(biāo)右鍵單擊的默認(rèn)行為)

1.1 document對象區(qū)域監(jiān)聽

$(document).on("contextmenu",function(){
     return false;
})

1.2 某一區(qū)域監(jiān)聽

$(某一元素).on("contextmenu",function(){
     return false;
})
2.觸發(fā)鼠標(biāo)點擊事件，獲取鼠標(biāo)當(dāng)前所在瀏覽器的位置

clientX/Y 提供了相對于viewport的以CSS像素度量的坐標(biāo)

HTML部分


    
    
        
  • 新增
    • 
        
  • 刪除
    • 
        
  • 編輯
    • 
    



CSS部分
#rMenu{
    position:absolute;
    visibility:hidden;
    top:0;
    background:#ccc;
    text-align:left;
}
JS部分
$(document).on("contextmenu",onRightClick);
//鼠標(biāo)點擊其他地方右鍵菜單消失
$("body").on("mousedown",onBoduMosueDown);
function onBoduMosueDown(){
      $("#rMenu").CSS({"visibility":"hidden"})   
}
function onRightClick(event){
    //鼠標(biāo)位置
    var x = e.clientX ,y = e.clientY , 
    //獲取視口寬高
    vx = document.documentElement.clientWidth , 
    vy = document.documentElement.clientHeight,
    //右側(cè)菜單寬高
    mw =  $("#rMenu").offsetWidth, mh =  $("#rMenu").offsetHeight;
    return {
        left : (x + mw) > vx ? (vx - mw ) : x,
        top : (y + mh) > vy ? (vy - mh ) : y
    }
    $("#rMenu").CSS({"left":x + "px","top":y + "px","visibility":"visible"})
    //阻止鼠標(biāo)右鍵單擊的默認(rèn)行為
    return false;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112453.html

相關(guān)文章

  • 綁定右鍵事件

    摘要：右鍵單擊鼠標(biāo)后會出現(xiàn)一個菜單，實現(xiàn)這個功能一事件單擊右鍵觸發(fā)事件定義和用法綁定該事件移除該事件語法參數(shù)描述可選。任意類型傳遞給事件處理程序的參數(shù)對象。類型事件觸發(fā)時執(zhí)行的函數(shù)。 右鍵單擊鼠標(biāo)后會出現(xiàn)一個菜單，實現(xiàn)這個功能 一. contextmenu 事件 單擊右鍵觸發(fā) contextmenu 事件 1.定義和用法 綁定該事件 .on( contextmenu, handler ) 移...

    Allen 評論0 收藏0

  • 教你如何解決IE9的輸入框input事件無法監(jiān)聽右鍵菜單的剪切、撤銷、刪除對內(nèi)容的改變的問題

    摘要：原來對全局的事件進(jìn)行監(jiān)聽，一旦發(fā)現(xiàn)就會嘗試觸發(fā)當(dāng)前文檔激活對象的事件。事件需要注意的點事件只能綁定在接口對象上，其他元素綁定無效，而且不可以取消也不能冒泡需要注意的是上右鍵菜單的剪切并不會觸發(fā)事件瀏覽器從開始支持相關(guān)文檔 文章起因 看Vue源代碼內(nèi)置指令時，發(fā)現(xiàn)了Vue對于IE9的selectionchange事件做了特殊處理，這引起了我的興趣。原來Vue對全局的selectionch...

    沈建明 評論0 收藏0

  • [譯][Tkinter 教程15] event 事件綁定

    摘要：已獲原作者授權(quán)原系列地址簡介一個應(yīng)用生命周期中的大部分時間都處在一個消息循環(huán)中它等待事件的發(fā)生事件可能是按鍵按下鼠標(biāo)點擊鼠標(biāo)移動等提供了用以處理相關(guān)事件的機(jī)制處理函數(shù)可以被綁定給各個控件的各種事件如果相關(guān)事件發(fā)生函數(shù)會被觸發(fā)事件對象會傳遞給 已獲原作者授權(quán). 原系列地址: Python Tkinter 簡介 一個 Tkinter 應(yīng)用生命周期中的大部分時間都處在一個消息循環(huán) (eve...

    zhkai 評論0 收藏0

  • javascript event 對象（事件對象）

    摘要：什么是事件對象在觸發(fā)上的某個事件時，會產(chǎn)生一個事件對象。包括導(dǎo)致事件的元素，事件的類型以及其他與特定事件相關(guān)的信息。鍵盤操作導(dǎo)致的事件對象中，會包含按下的鍵有關(guān)的信息。取消默認(rèn)行為，取消右鍵菜單阻止默認(rèn)事件環(huán)境菜單，上下文菜單 什么是事件對象？ 在觸發(fā)DOM上的某個事件時，會產(chǎn)生一個事件對象event。這個對象中包含著所有與事件有關(guān)的信息。包括導(dǎo)致事件的元素，事件的類型以及其他與特定事...

    zilu 評論0 收藏0

  • JavaScript 事件簡介

    摘要：事件流包括兩種模式冒泡和捕獲。和事件名，函數(shù)，此方法不支持僅僅支持兩個參數(shù)事件名稱事件回調(diào)。事件中沒有這個屬性。鼠標(biāo)相對于事件源元素的左邊界上邊界坐標(biāo)，只有事件有這個屬性，標(biāo)準(zhǔn)事件沒有對應(yīng)的屬性。 事件 事件的概念 事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間【觸發(fā)與響應(yīng)】事件觸發(fā)：用戶在頁面上操作(如點擊按鈕, 鼠標(biāo)滑過, 鼠標(biāo)點擊, 鼠標(biāo)松開, 文本框獲得焦點, 失去焦點等)...

    makeFoxPlay 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<