Przycisk onclick wewnątrz całego klikalnego div

Question

Mam cały klikalny div. To jest mój kod:

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

To div z obrazu z nazwą produktu i grupowej. A gdy użytkownik najedzie kursorem, wewnątrz przycisków div show 2 Edit and Delete. Problem polega na tym, że klikam dowolny przycisk wewnątrz Div, jego wywołanie funkcji div, a nie przycisk onclick. Czy potrzebujesz pomocy? Przepraszam, mój angielski.

Answer 1

Dzięki za wszystko. Jak mówią Robooneus. Po prostu to:

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

A teraz działa. Dziękuje wszystkim.

Answer 2

W rzeczywistości oba działania (przycisk i div) są wyzwalane. Powinieneś przestać propagować zdarzenia za pomocą stopPropagation/cancelBubble. Dalsze czytanie o bulgotanie: http://javascript.info/tutorial/bubbling-and-capturing

Answer 3

Dla swoimi dwoma przyciskami, należy utworzyć nową funkcję, i dodać ten kod na początku:

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

Następnie dodać swój własny kod.

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