31

クリック可能な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 つのボタンが表示されます。問題は、Div 内の任意のボタンをクリックすると、ボタンの onclick ではなく、div の onclick が呼び出されることです。助けてください。申し訳ありませんが私の英語。

4

4 に答える 4

30

全てに感謝。ロボネウスと言うように。私はちょうどこれを置く：

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

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

于 2013-07-25T15:42:01.707 に答える
16

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")'; 
}
于 2013-07-25T15:40:52.827 に答える
12

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

于 2013-07-25T15:31:28.323 に答える