Question

我的内容可编辑内容中的上下文菜单有点问题。我认为这是一个风格问题，但我无法弄清楚它是什么造成的。这就是事情，我的上下文菜单显示了他所处的位置，以及他所拥有的价值。但似乎对他来说只是一个障碍而不是我的DIV元素中的P元素列表。

如您所见，我们无法点击上下文菜单中的元素。

我的CSS：

.ctxmenu
{
    display: block;
    position: absolute;
    height: auto;
    padding: 0px;
    margin: 0;
    margin-left: 0.5em;
    margin-top: 0.5em;
    border: 1px solid black;
    background: #F8F8F8;
    z-index: 11;
    overflow: visible;
}
.ctxline
{
    display: block;
    margin: 0px;
    padding: 0px 0px 0px 3px;
    border: 1px solid #F8F8F8;
    overflow: visible;
}
.ctxline:hover
{
    border: 1px solid #BBB;
    background-color: #F0F0F0;
    background-repeat: repeat-x;
}

内容可编辑的CSS：

.rootClass 
{
    border:1 solid buttonface; 
    border:2 groove buttonhighlight;
    OVERFLOW: scroll; 
    OVERFLOW-X: hidden; 
    OVERFLOW-Y: auto; 
    WIDTH: 762px; 
    POSITION: relative; 
    TOP: 65px; 
    left: 10px; 
    HEIGHT: 88%; 
    WORD-WRAP: break-word;
    FONT-FAMILY :Times New Roman;
    background-color: white;
}

.menu_editeur 
{   
    border : 0;
    background-color : #cccccc;
}

HTML：

<DIV id=edth_corps contentEditable=true style="WORD-WRAP: break-word; FONT-SIZE: 12pt; BORDER-TOP: buttonhighlight 2px groove; HEIGHT: 400px; FONT-FAMILY: Helvetica; BORDER-RIGHT: buttonhighlight 2px groove; WIDTH: 690px; OVERFLOW-X: hidden; BORDER-BOTTOM: buttonhighlight 2px groove; POSITION: absolute; LEFT: 10px; BORDER-LEFT: buttonhighlight 2px groove; Z-INDEX: 4; TOP: 132px; BACKGROUND-COLOR: white" name="lettre" unselectable="" comportement="F">
    <P><SPAN id=0 class=erreurOrthographe oncontextmenu="rightClickMustWork(this);return false">tset</SPAN> pour <SPAN id=1 class=erreurOrthographe oncontextmenu="rightClickMustWork(this);return false">vior</SPAN>
        <DIV id=ctxmenu1 class=ctxmenu contentEditable=false style="CURSOR: pointer; LEFT: 59px; TOP: 15px">
            <P onclick=alertMe(); class=ctxline>viorne</P>
            <P onclick=alertMe(); class=ctxline>viornes</P>
        </DIV>
    </P>
</DIV>

或者如果你知道任何可能最终会这样做的属性，我的cowerker可能会在其他地方隐藏一些CSS（他们没有使用CSS文件将所有样式放在里面......）。

他应该做什么的例子：

Answer 1

使用上下文菜单标记。

<menu type="context" id="mymenu">
    <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/refresh-icon.png"></menuitem>
    <menuitem label="Skip to Comments" onclick="window.location='#comments';" icon="/comment_icon.gif"></menuitem>
    <menu label="Share on..." icon="/images/share_icon.gif">
        <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick=""></menuitem>
        <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick=""></menuitem>
    </menu>
</menu>

这是参考视频，我在Youtube

上找到了它

干杯;）

Answer 2

问题（无论如何）来自：

<P onclick=alertMe(); class=ctxline>viorne</P>

＆＃34;我将其替换为：

<P onclick=alert("test"); class=ctxline>viorne</P>

[编辑]这是您更新的小提琴：https://jsfiddle.net/2wown2cr/5/

这似乎解决了这个问题。如果您仍有任何问题，请指定您的浏览器信息。

Answer 3

好的伙计们，我找到了回复。你现在IE不像其他所有的网络浏览器，如果你想在IE中这样做，你必须使用一个特殊的东西来附加事件。在为上下文菜单生成事件的行上，您需要输入：

p.attachEvent("onclick", alertMe);

使用alerMe是最后没有“（）”的事件的名称。如果使用setAttribute或addEventListener，则无效。

如果你需要在活动中添加一些参数，你可以这样做：

p.attachEvent("onclick", function { return myFunction(params1,params2,paramsX)});

内容中的不可点击的上下文菜单可编辑

3 个答案: