Question

我有一个包含内容的文本框。我只需要，当我选择文本并右键单击时，相应的（引用）列表应显示为基于所选文本的弹出窗口。

例如。在文章中，将会出现＃34;这是由（williams，2012）＆＃34;引用的。如果我选择Williams并右键单击，名称为williams的参考列表应列为弹出窗口。

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

现在，我只是使用此代码，我不知道如何根据我的要求构建它。当右键单击所选文本时如何弹出相应的列表。请帮助！

Answer 1

你应该这样做。

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

如何在javascript中自定义右键单击选项？

1 个答案: