首頁猿問 Javascript：將項目添加到...

Javascript：將項目添加到上下文菜單

JavaScript

RISEBY 2023-09-14 20:35:45

當單擊特定的 HTML 元素時，我希望在上下文菜單中顯示一個自定義元素，單擊該元素會調用 Javascript 函數。// The element to whose context menu the item should be added.const element = document.getElementById('example');// The menu item that should be added.const menuItem = document.getElementById('menuItem');element.addEventListener('contextmenu', e => { //e.menuItems.add(menuItem); // How to get it into the menu?});#example{border:thin solid;padding:1em;}<p id="example">I want to add an item to the context menuhat opens on this paragraph.</p><span onclick="javascript:alert('the menu item has been clicked')" id="menuItem"> Click me!</span>

查看完整描述

3 回答

慕無忌1623718

TA貢獻1744條經驗獲得超4個贊

您無法添加到“真實”菜單，但您可以偽造它并且無需禁用常規菜單。

監聽上下文菜單事件，在合理的位置顯示一個按鈕，只要上下文菜單被觸發，它就會出現。我把它放在左邊，但你可以嘗試一下。然后，您只需在單擊或模糊時將其隱藏即可。

// The element to whose context menu the item should be added.

const element = document.getElementById('example');

// The menu item that should be added.

const menuItem = document.getElementById('menuItem');

// ...so listen for the contextmenu event on this element

element.addEventListener('contextmenu', e => {

//e.menuItems.add(menuItem); // How to get it into the menu?

menuItem.style.left = (e.clientX - menuItem.getBoundingClientRect().width) + "px";

menuItem.style.top = (e.clientY - menuItem.getBoundingClientRect().height) + "px";

menuItem.style.visibility = 'visible';

menuItem.focus();

});

// ...do this when you click the button:

menuItem.addEventListener('mousedown', e => {

menuItem.style.visibility = 'hidden'

menuItem.blur();

alert('the menu item has been clicked');

});

// ...hide the button onblur

menuItem.addEventListener('blur', e => {

menuItem.style.visibility = 'hidden';

});

#example{border:thin solid;padding:1em;}

#menuItem{visibility:hidden;position:absolute;width:80px;height:35px;outline: none;box-shadow: none;}

I want to add an item to the context menu

that opens on this paragraph.

</p>

<!--

the element below is supposed to show

in the context menu instead of inline.

-->

<button

id="menuItem">

Click me!

</button>

反對回復 2023-09-14

互換的青春

TA貢獻1797條經驗獲得超6個贊

如果不使用WebExtension就無法修改瀏覽器上下文菜單，最好的解決方案是使用e.preventDefault()它停止瀏覽器上下文菜單顯示，然后添加您自己的上下文菜單（例如彈出窗口）。

反對回復 2023-09-14

函數式編程

TA貢獻1807條經驗獲得超9個贊

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items

"permissions": ["contextMenus"]

browser.contextMenus.create(

{

id: "log-selection",

title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),

contexts: ["selection"],

onCreated

);

browser.contextMenus.onClicked.addListener((info, tab) => {

switch (info.menuItemId) {

case "log-selection":

console.log(info.selectionText);

break;

// …

}

});

反對回復 2023-09-14

3 回答
0 關注
125 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript：將項目添加到上下文菜單

Javascript：將項目添加到上下文菜單

3 回答

添加回答