时间戳

首页 > 解决方案 > js为动态出现的菜单创建onclick事件

javascript - js为动态出现的菜单创建onclick事件

问题描述

我想为现场动态创建的弹出菜单添加 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 ，但没有任何改变。我做错了什么？

我用注释标记了我的问题函数 (???)

标签： javascript

解决方案

您已经使用 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>

我已经更新了你的代码：

使用右键单击创建弹出窗口

在文档中的任意位置单击即可隐藏它

只需单击链接即可在控制台中显示消息

推荐阅读