按鈕全可點擊的div

Question

內的onclick我有一個整體的可點擊的股利。 這是我的代碼：

<div onclick="location.href='@Url.Action("SubClass", "Product", new { id = productClass.HierarchyId })';" class="menu-class"> 
      <img src="~/Images/ClassImages/@imageName" alt="@productClass.HierarchyShort" /> 
      <div class="menu-class-text"> 
       <span>@productClass.HierarchyShort</span> 
      </div> 
      <div class="menu-class-admin-options"> 
       <button onclick=" location.href = '@Url.Action("EditClass", "Product")'; ">Edit</button><br/> 
       <button onclick=" location.href = '@Url.Action("DeleteClass", "Product")'; ">Delete</button> 
      </div> 
     </div> 

這是一個帶有產品和組名的圖像的div。當用戶將它懸停時，在div show 2按鈕的編輯和刪除中。 問題是當我點擊Div內的任何按鈕時，它調用div的onclick，而不是按鈕的onclick。 請幫忙嗎？ 對不起，我的英語。

Answer 1

感謝所有。就像robooneus。 我只是把這個：

<button onclick=" location.href = '@Url.Action("NewClass", "Product")'; event.stopPropagation(); ">Edit</button><br/> 

現在正在工作。謝謝大家。

Answer 2

實際上，這兩個動作（按鈕的和div的）被觸發。你應該停止使用 stopPropagation/cancelBubble傳播事件。進一步閱讀有關冒泡：http://javascript.info/tutorial/bubbling-and-capturing

Answer 3

爲了您的兩個按鈕，創建一個新的功能，並在開始添加以下代碼：

event.cancelBubble = true; 
if(event.stopPropagation) event.stopPropagation(); 

然後添加自己的代碼。

的HTML：

<div onclick="location.href='@Url.Action("SubClass", "Product", new { id = productClass.HierarchyId })';" class="menu-class"> 
     <img src="~/Images/ClassImages/@imageName" alt="@productClass.HierarchyShort" /> 
     <div class="menu-class-text"> 
      <span>@productClass.HierarchyShort</span> 
     </div> 
     <div class="menu-class-admin-options"> 
      <button onclick="editClass()">Edit</button><br/> 
      <button onclick="deleteClass()"; ">Delete</button> 
     </div> 
    </div> 

的JavaScript：

function editClass() { 
    event.cancelBubble = true; 
    if(event.stopPropagation) event.stopPropagation(); 

    location.href = '@Url.Action("EditClass", "Product")'; 
} 

function deleteClass() { 
    event.cancelBubble = true; 
    if(event.stopPropagation) event.stopPropagation();$ 

    location.href = '@Url.Action("DeleteClass", "Product")'; 
}