如何在javascript中自定義右鍵點擊選項？

我有一個內容的文本框。我只需要，當我選擇文本並右鍵單擊時，適當的（參考）列表應顯示爲基於所選文本彈出。如何在javascript中自定義右鍵點擊選項？

例如。在這篇文章中，會有「這是由（威廉姆斯，2012）提到的」。如果我選擇威廉姆斯並右鍵點擊，名爲威廉姆斯的參考列表應該被列爲彈出窗口。

javascript代碼：

if (document.addEventListener) { 
     document.addEventListener('contextmenu', function(e) { 
      alert("You've tried to open context menu"); //here you draw your own menu 
      e.preventDefault(); 
     }, false); 
    } else { 
     document.attachEvent('oncontextmenu', function() { 
      alert("You've tried to open context menu"); 
      window.event.returnValue = false; 
     }); 
    }

HTML：

<body> 
Lorem ipsum... 
</body>

此代碼是從jsfiddle

現在，我只是用這個代碼，只有我沒有任何想法如何按照我的要求構建它。當用所選文本右鍵單擊時，如何彈出相應的列表。請幫忙！

來源

2014-11-22 vidhya

'HTTP：// blog.teamtreehouse.com /建築HTML5的上下文menus' 'HTTP：// livepipe.net /控制/ contextmenu' – 2014-11-22 08:15:52

只需創建/顯示一個包含該列表的元素。您可以使用[MouseEvent]（https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent）的某些屬性來計算該元素的位置。 – Teemu 2014-11-22 08:20:54

混淆上下文菜單很麻煩，請考慮使用懸停或熱點來彈出信息。 – RobG 2014-11-22 08:51:36

你應該這樣做。

function customContextAction(e){ 
 
    var \t posX = e.x || e.clientX || e.layerX || e.offsetX || e.pageX, \t //gets the event position X 
 
    \t posY=e.y || e.clientY || e.layerY || e.offsetY || e.pageY; \t \t //gets the event position Y 
 
    var selectedText=window.getSelection().toString() || ""; 
 
    var ctx = document.getElementById('context'); 
 
    if (ctx.className.toLowerCase().indexOf("hidden") >= 0){ 
 
    \t ctx.className=""; 
 
    \t ctx.setAttribute('style', 'top:'+posY+"px;"+"left:"+posX+"px"); 
 
    if(selectedText!="") ctx.children[0].innerHTML=selectedText; 
 
    } 
 
    else{ 
 
    \t ctx.className="hidden"; 
 
    \t customContextAction(e); 
 
    } 
 
} 
 

 
if (document.addEventListener) { 
 
    document.addEventListener('contextmenu', function(e) { 
 
     customContextAction(e); 
 
     e.preventDefault(); 
 
    }, false); 
 
} else { 
 
    document.attachEvent('oncontextmenu', function(e){ 
 
     customContextAction(e); 
 
     window.event.returnValue = false; 
 
    }); 
 
}

#context { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 150px; 
 
    background-color: #cacaca; 
 
} 
 
#context.hidden { 
 
    display: none; 
 
} 
 
#context .inner {}

Select something and right click anywhere! 
 
<div id="context" class="hidden"> 
 
    <div class="inner"> 
 
    CONTEXT CONTENT 
 
    </div> 
 
</div>

來源

2014-11-22 13:34:50

如何在javascript中自定義右鍵點擊選項？

回答

相關問題