Nút onclick bên trong toàn bộ div có thể nhấp

Question

Tôi có toàn bộ div có thể nhấp. Đây là mã của tôi:

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

Đây là div có hình ảnh về tên sản phẩm và nhóm. Và khi người dùng di chuột qua nó, bên trong nút div show 2 Edit và Delete. Vấn đề là khi tôi nhấp vào bất kỳ nút nào bên trong Div, cuộc gọi của nó là onclick của div chứ không phải nút onclick. Bạn có cần trợ giúp không? Xin lỗi tiếng anh của tôi.

Answer 1

Cảm ơn tất cả. Như nói robooneus. Tôi chỉ cần đặt điều này:

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

Và hiện đang hoạt động. Cảm ơn tất cả.

Answer 2

Thực tế cả hai hành động (nút và div) được kích hoạt. Bạn nên ngừng truyền bá sự kiện bằng cách sử dụng stopPropagation/cancelBubble. Đọc thêm về bọt: http://javascript.info/tutorial/bubbling-and-capturing

Answer 3

Đối với hai nút của bạn, tạo ra một chức năng mới, và thêm mã này ngay từ đầu:

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

Sau đó thêm mã của riêng bạn.

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> 

Các 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")'; 
}