Pulsante onclick all'interno dell'intero div selezionabile

Question

Ho un intero div selezionabile. Questo è il mio codice:

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

Si tratta di un div con l'immagine del nome del prodotto e del gruppo. E quando l'utente lo alza, all'interno di div mostra 2 pulsanti Modifica ed Elimina. Il problema è quando clicco su qualsiasi pulsante all'interno di Div, chiama l'onclick del div, non l'onclick del pulsante. Ti preghiamo di aiuto? Scusate il mio inglese.

Answer 1

Grazie per tutti. Come dire robooneus. Ho appena messo questo:

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

E ora sta funzionando. Ringrazia tutti.

Answer 2

In realtà entrambe le azioni (pulsante e div) vengono attivate. È necessario interrompere la propagazione degli eventi utilizzando stopPropagation/cancelBubble. Altri progetti A proposito spumeggiante: http://javascript.info/tutorial/bubbling-and-capturing

Answer 3

Per i vostri due pulsanti, creare una nuova funzione, e aggiungere questo codice all'inizio:

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

Quindi aggiungere il proprio codice.

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

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