web-dev-qa-db-ja.com

クリック可能なdiv全体の中のボタンonclick

クリック可能な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内のボタンをクリックすると、ボタンのonclickではなく、divのonclickが呼び出されることです。助けてください？すみません、私の英語。

javascripthtmlcssasp.net-mvc
20
Yuri Morales

全てに感謝。ロボオネウスと言うように。私はこれを置くだけです：

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

そして今は働いています。皆さんありがとう。

20
Yuri Morales

2つのボタンについて、新しい関数を作成し、このコードを最初に追加します。

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

実際には、両方のアクション（ボタンとdiv）がトリガーされます。 stopPropagation/cancelBubbleを使用して、イベントの伝播を停止する必要があります。バブリングについてさらに読む： http://javascript.info/tutorial/bubbling-and-capturing

7
Sergey Kochetov