クリック可能なdiv内のボタンonclick

Question

クリック可能なdivがあります。 これは私のコードです：

<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内の2つのボタンEditとDeleteが表示されます。 問題は、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")'; 
}