我在 MVC View 中有以下 html
<div class="main-container">
<link href="/Content/styles.css" rel="stylesheet" />
<link href="/Content/contextmenu.css" rel="stylesheet" />
<div class="filemanager">
<div class="search">
<input type="search" placeholder="Find a file.." />
</div>
<div class="breadcrumbs"></div>
<ul class="data">
</ul>
@*<div class="nothingfound">
<div class="nofiles"></div>
<span>No files here.</span>
</div>*@
</div>
<script src="/Scripts/contextmenu.js"></script>
<script src="/Scripts/script.js"></script>
</div>
然后我有以下 JavaScript 代码
function FileRightClick(item) {
// Show contextmenu
$("#copymenu").finish().toggle(100).css({ top: event.pageY + "px", left: event.pageX + "px" });
return false;
};
$(".main-container").bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$("#pastemenu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
<ul class="data">
由文件和文件夹填充, <li>
每个文件都包含以下代码 oncontextmenu="return FileRightClick(this);"
但是,如果我右键单击文件上的任意位置,则会弹出两个菜单。但如果我右键单击没有文件或文件夹的任何地方,则会显示#pastmenu。
如何防止两者被调用或组合 FileRightClick
进入$(".main-container")
最佳答案
首先要注意的是“.bind”已被弃用,并在几年前被取代 - 您应该使用“.on”。请参阅http://api.jquery.com/bind/ 。
无论如何,如果您使用 jQuery 委托(delegate)事件(通过“on”:-))定义 FileRightClick,您就可以轻松使用 stopPropagation https://api.jquery.com/event.stoppropagation/以防止主容器上的点击触发。这是有效的,因为此命令会阻止事件在 DOM 上层冒泡,因此“maincontext”元素永远不会收到单击事件。
有关委托(delegate)事件的更多信息(无需为动态创建的事件使用内联事件语法),请参阅 http://api.jquery.com/on/在“直接和委托(delegate)事件”部分下。
$(function() {
$(".main-container").on("contextmenu", function(event) {
// Avoid the real one
event.preventDefault();
alert("main context menu");
});
$(".data").on("contextmenu", "li", function(event) {
// Avoid the real one
event.preventDefault();
event.stopPropagation();
alert("individual data context menu");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div class="filemanager">
<div class="search">
<input type="search" placeholder="Find a file.." />
</div>
<div class="breadcrumbs"></div>
<ul class="data">
<li>Data - Right Click Me</li>
<li>Data - Right Click Me 2</li>
</ul>
</div>
</div>
关于javascript - 防止点击事件 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44153691/