Button onclick innerhalb ganz anklickbar div

Question

Ich habe eine ganze anklickbare Div. Dies ist mein Code:

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

Dies ist ein div mit dem Bild von Produkt- und Gruppennamen. Und wenn der Benutzer es schwebt, zeigen Sie in der div-Show 2 Schaltflächen Bearbeiten und Löschen an. Das Problem ist, wenn ich auf einen beliebigen Button innerhalb von Div klicke, den div's onclick aufrufen, nicht den onclick der Taste. Hilfe anbieten? Sorry mein Englisch.

Answer 1

Vielen Dank für alle. Wie sagt Roboneus. ich das gerade gesagt:

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

Und jetzt arbeitet. Danke allen.

Answer 2

Eigentlich beide Aktionen (Schaltfläche und divs) ausgelöst werden. Sie sollten die Weitergabe von Ereignissen stoppen, indem Sie stopPropagation/cancelBubble verwenden. Weitere über sprudelnde Lesen: http://javascript.info/tutorial/bubbling-and-capturing

Answer 3

Für Ihre zwei Tasten, eine neue Funktion erstellen und diesen Code am Anfang hinzufügen:

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

Dann Ihren eigenen Code hinzufügen.

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

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