js為動態出現的菜單創建onclick事件

Question

我想為現場動態創建的彈出菜單添加 onclick 事件。 這是一個代碼：

<div id="rmenu">
   <div class="rmenu_options">
        <a href="#" id="start" >Create starting point</a>
   </div>
   <div class="rmenu_options">
       <a href="#" id="goal">Create goal point</a>
   </div>
</div>

.rmenu_options {
    margin-bottom: 7px;
    cursor: pointer;
    }
#rmenu {
    display: none;
    position: absolute;
    background: bisque;
    width: 175px;
    height: 55px;
    padding: 10px;
    border-radius: 6px;
    font-size: 18px;
}

// create mouse rightclick menu

function mouseX(evt) {
    if (evt.pageX) {
        return evt.pageX;
    } else if (evt.clientX) {
        return evt.clientX + (document.documentElement.scrollLeft ?
    document.documentElement.scrollLeft :
    document.body.scrollLeft);
    } else {
        return null;
    }
}

function mouseY(evt) {
    if (evt.pageY) {
        return evt.pageY;
    } else if (evt.clientY) {
        return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    } else {
        return null;
    }
}

window.oncontextmenu = function openRightClickMenu (e) {
    e.preventDefault();
    document.getElementById("rmenu").style.display = "block";
    document.getElementById("rmenu").style.top = mouseY(e) + 'px';
    document.getElementById("rmenu").style.left = mouseX(e) + 'px';
    document.getElementById("rmenu").classList.add("opened");

    window.event.returnValue = false;
}

// remove mouse rightclick menu

document.onmousedown = function removeRightClickMenu (e) {
    if (e.which == 1) {
        if (document.getElementById("rmenu").classList == "opened") {

            document.getElementById("rmenu").classList.remove("opened");
            document.getElementById("rmenu").style.display = "none";
        }
    }  
}

// ???
document.getElementById('rmenu').addEventListener("click", function() {
    function whatToDo (e) {
        if (e.target.id == 'start') {
            console.log("start clicked")
        } else if (e.target.id == 'goal') {
            console.log("goal clicked")
        }
    }
});

如何為動態創建的彈出菜單添加 onclick 事件？

我在網上沖浪，然后像作者推薦的那樣創建了 addEventListener ，但沒有任何改變。 我做錯了什么？

我用注釋 (???) 標記了我的問題函數

Answer 1

您已經使用 document.onmousedown 來隱藏右鍵單擊菜單，首先將事件應用於整個文檔，這意味着無論您單擊什么地方，彈出窗口都將變為不可見，然后將右鍵單擊、左鍵單擊和鼠標滾動按鈕作為事件觸發而不僅僅是右鍵單擊

 function mouseX(evt) { if (evt.pageX) { return evt.pageX; } else if (evt.clientX) { return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); } else { return null; } } function mouseY(evt) { if (evt.pageY) { return evt.pageY; } else if (evt.clientY) { return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); } else { return null; } } window.oncontextmenu = function openRightClickMenu (e) { e.preventDefault(); document.getElementById("rmenu").style.display = "block"; document.getElementById("rmenu").style.top = mouseY(e) + 'px'; document.getElementById("rmenu").style.left = mouseX(e) + 'px'; document.getElementById("rmenu").classList.add("opened"); window.event.returnValue = false; } // remove mouse rightclick menu /*document.getElementById('rmenu').addEventListener("dblclick",function(e){ document.getElementById('rmenu').style.display = "none"; }); */ document.documentElement.addEventListener("click", function(e) { document.getElementById('rmenu').style.display = "none"; }); // ??? document.getElementById('rmenu').addEventListener("click", function(e) { e.stopPropagation(); function whatToDo (e) { if (e.target.id == 'start') { console.log("start clicked") } else if (e.target.id == 'goal') { console.log("goal clicked") } } }); document.getElementById('start').addEventListener("click", function(e) { e.stopPropagation(); console.log("start clicked"); }); document.getElementById('goal').addEventListener("click", function(e) { e.stopPropagation(); console.log("goal clicked"); });

 .rmenu_options { margin-bottom: 7px; cursor: pointer; } #rmenu { display: none; position: absolute; background: bisque; width: 175px; height: 55px; padding: 10px; border-radius: 6px; font-size: 18px; }

 <html> <div id="rmenu"> <div class="rmenu_options"> <a href="#" id="start" >Create starting point</a> </div> <div class="rmenu_options"> <a href="#" id="goal">Create goal point</a> </div> </div> </html>

我已經更新了你的代碼：

使用右鍵單擊創建彈出窗口

在文檔中的任意位置單擊即可隱藏它

單擊鏈接可在控制台中顯示一條消息