javascript - 防止点击事件 javascript

Question

我在 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")

Answer 1

首先要注意的是“.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>