Question

我有一点问题，我在Vanilla Javascript的上下文菜单中为我的ASP.NET应用程序工作。当我使用它时，没有错误消息，但没有任何显示。上下文菜单用于处理内容可编辑，当我创建跨越我需要它工作的单词时。这是生成的单词

<span id="0" class="underlineWord" oncontextmenu="rightClickMustWork(this);">test</span>

以下是Javascript中的上下文菜单：

function rightClickMustWork(element) {
var x = document.getElementById('ctxMenu1');
if (x) x.parentNode.removeChild(x);
alert("1");
var d = document.createElement('div');
d.setAttribute('class', 'ctxMenu');
d.setAttribute('id', 'ctxMenu1');
element.parentNode.appendChild(d);
d.onmouseover = function (e) {
    this.style.cursor = 'pointer';
}
alert("2");
d.onclick = function (e) {
    if (document.getElementById("ctxMenu1") != null) {
        element.parentNode.removeChild(d);
    }
}
alert("3");
document.body.onclick = function (e) {
    if (document.getElementById("ctxMenu1") != null) {
        element.parentNode.removeChild(d);
    }
}
alert("4");
for (i = 0; i < 5; ++i) {
    var p = document.createElement('p');
    d.appendChild(p);
    p.setAttribute('class', 'ctxLine');
    p.setAttribute('onclick', 'alert("the action will be here if it worked")');
    p.innerHTML = "test";
}
alert("5");

}

以及此上下文菜单的CSS：

        .ctxMenu
    {
        position: absolute;
        min-width: 8em;
        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: 2px 2px 2px 8px;
        border: 1px solid #F8F8F8;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        overflow: visible;
    }
    .ctxLine:hover
    {
        border: 1px solid #BBB;
        background-color: #F0F0F0;
        background-repeat: repeat-x;
    }

当我尝试它时，我会通过一个号码完成所有警报，但什么都没有显示出来。我不知道自己错过了什么。（可编辑的内容是在iframe内部，但我认为这可能会导致问题，因为所有警报都会播放）。

Answer 1

嗯......这可能有点令人沮丧。

问题在于：p.innerHTMl = "test";而不是p.innerHTML = "test";

此外，我添加了event.preventDefault()以避免浏览器上下文菜单。

＆＃13;

function rightClickMustWork(element, event) {
  event.preventDefault();
   var x = document.getElementById('ctxMenu1');
   if (x) x.parentNode.removeChild(x);
   //alert("1");
   var d = document.createElement('div');
   d.setAttribute('class', 'ctxMenu');
   d.setAttribute('id', 'ctxMenu1');
   element.parentNode.appendChild(d);
   d.onmouseover = function (e) {
       this.style.cursor = 'pointer';
   }
   //alert("2");
   d.onclick = function (e) {
       if (document.getElementById("ctxMenu1") != null) {
           element.parentNode.removeChild(d);
       }
   }
   //alert("3");
   document.body.onclick = function (e) {
       if (document.getElementById("ctxMenu1") != null) {
           element.parentNode.removeChild(d);
       }
   }
   //alert("4");
   for (i = 0; i < 5; ++i) {
       var p = document.createElement('p');
       d.appendChild(p);
       p.setAttribute('class', 'ctxLine');
       p.setAttribute('onclick', 'alert("the action will be here if it worked")');
       // was p.innerHTMl = "test";
       p.innerHTML = "test";
   }
   //alert("5");
}

＆＃13;

 .ctxMenu
    {
        position: absolute;
        min-width: 8em;
        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: 2px 2px 2px 8px;
        border: 1px solid #F8F8F8;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        overflow: visible;
    }
    .ctxLine:hover
    {
        border: 1px solid #BBB;
        background-color: #F0F0F0;
        background-repeat: repeat-x;
    }

＆＃13;

<span id="0" class="underlineWord" oncontextmenu="rightClickMustWork(this, event);">test</span>

＆＃13;

上下文菜单不会出现在asp.net iframe中

1 个答案: