綁定右鍵事件

Allen 發布于2019-08-20 18:56 / 1341人閱讀

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

右鍵單擊鼠標后會出現一個菜單，實現這個功能

一. contextmenu 事件

單擊右鍵觸發 contextmenu 事件

1.定義和用法

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

2.語法

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

3.參數描述

eventData 可選。任意類型傳遞給事件處理程序的參數對象。
handler 可選。 Function類型事件觸發時執行的函數。

二. 顯示右側菜單

1.鼠標點擊事件(阻止鼠標右鍵單擊的默認行為)

1.1 document對象區域監聽

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

1.2 某一區域監聽

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

2.觸發鼠標點擊事件，獲取鼠標當前所在瀏覽器的位置

clientX/Y 提供了相對于viewport的以CSS像素度量的坐標

HTML部分

    
        新增
        刪除
        編輯
    

CSS部分
#rMenu{
    position:absolute;
    visibility:hidden;
    top:0;
    background:#ccc;
    text-align:left;
}
JS部分
$(document).on("contextmenu",onRightClick);
//鼠標點擊其他地方右鍵菜單消失
$("body").on("mousedown",onBoduMosueDown);
function onBoduMosueDown(){
      $("#rMenu").CSS({"visibility":"hidden"})   
}
function onRightClick(event){
    //鼠標位置
    var x = e.clientX ,y = e.clientY , 
    //獲取視口寬高
    vx = document.documentElement.clientWidth , 
    vy = document.documentElement.clientHeight,
    //右側菜單寬高
    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"})
    //阻止鼠標右鍵單擊的默認行為
    return false;
}

云服務器 GPU云服務器事件綁定重復綁定事件綁定點擊事件 javascript事件綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84887.html

綁定右鍵事件

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

maxmin 2019-08-29 13:13 評論0 收藏0
教你如何解決IE9的輸入框input事件無法監聽右鍵菜單的剪切、撤銷、刪除對內容的改變的問題

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

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

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

zhkai 2019-07-30 16:08 評論0 收藏0
javascript event 對象（事件對象）

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

zilu 2019-08-26 12:18 評論0 收藏0
JavaScript 事件簡介

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

makeFoxPlay 2019-08-02 14:04 評論0 收藏0