防止点击进入事件的JavaScript

Question

我有以下的HTML一个MVC视图

<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”已被弃用，并在数年前取代 - 你应该用”。对”。见http://api.jquery.com/bind/。

无论如何，如果您使用jQuery委托事件（通过“on”:-)定义FileRightClick，则可以轻松使用stopPropagation https://api.jquery.com/event.stoppropagation/来防止点击主容器发射。这是有效的，因为这个命令会阻止事件从DOM上冒泡，所以“maincontext”元素永远不会收到click事件。

有关委派事件的更多信息（无需为动态创建的事件使用内联事件语法），请参阅http://api.jquery.com/on/下的“直接和委派事件”部分。

$(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>