防止點擊進入事件的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>