綁定右鍵事件

Allen 發(fā)布于2019-08-20 18:56 / 1347人閱讀

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

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

一. contextmenu 事件

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

1.定義和用法

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

2.語(yǔ)法

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

3.參數(shù)描述

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

二. 顯示右側(cè)菜單

1.鼠標(biāo)點(diǎn)擊事件(阻止鼠標(biāo)右鍵單擊的默認(rèn)行為)

1.1 document對(duì)象區(qū)域監(jiān)聽(tīng)

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

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

$(某一元素).on("contextmenu",function(){
     return false;
})

2.觸發(fā)鼠標(biāo)點(diǎn)擊事件，獲取鼠標(biāo)當(dāng)前所在瀏覽器的位置

clientX/Y 提供了相對(duì)于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)點(diǎn)擊其他地方右鍵菜單消失
$("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;
}

GPU云服務(wù)器云服務(wù)器事件綁定重復(fù)綁定事件綁定點(diǎn)擊事件 javascript事件綁定

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84887.html

相關(guān)文章

綁定右鍵事件

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

maxmin 2019-08-29 13:13 評(píng)論0 收藏0
教你如何解決IE9的輸入框input事件無(wú)法監(jiān)聽(tīng)右鍵菜單的剪切、撤銷、刪除對(duì)內(nèi)容的改變的問(wèn)題

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

沈建明 2019-08-23 14:04 評(píng)論0 收藏0
[譯][Tkinter 教程15] event 事件綁定

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

zhkai 2019-07-30 16:08 評(píng)論0 收藏0
javascript event 對(duì)象（事件對(duì)象）

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

zilu 2019-08-26 12:18 評(píng)論0 收藏0
JavaScript 事件簡(jiǎn)介

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

makeFoxPlay 2019-08-02 14:04 評(píng)論0 收藏0