Button-onclick-innen insgesamt anklickbare div

Habe ich eine ganze anklickbare div.
Das 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 des Produktes und name der Gruppe. Und wenn der Benutzer den Mauszeiger darüber schweben, innerhalb des div-show 2 Schaltflächen Bearbeiten und Löschen.
Das problem ist wenn ich auf eine beliebige Taste innerhalb Div, seine Forderung, die div onclick, nicht die Schaltfläche onclick.
Bitte keine Hilfe?
Sorry mein Englisch.

  • In Ihrem CSS-code, den Sie verwenden möchten, entweder !wichtiges Attribut Oder z-Wert zu wählen, welche ist auf der Oberseite Id sagen, man wird arbeiten.
  • Bitte laden Sie Ihr css und ich werde gehen
  • Als matthiasgh sagte, versuchen Sie, einen höheren z-index zu den Tasten (stellen Sie sicher, Sie sind position:relative; auch). Wenn nicht, können Sie versuchen, das hinzufügen einer event.stopPropagation() nachdem Sie die Schaltfläche onclick-Aktion.
  • Erwartetes Verhalten: das klicken auslösen der Schaltfläche onclick-Ereignis, dann wird das div onclick-Ereignis jsfiddle.net/d2Ya5 Wenn das div onclick zuerst ausgeführt wird, es könnte ein z-index Problem in der CSS
  • Ich versuche, z-index und funktioniert nicht. In meinem ganzen CSS nicht auf der z-index.
  • Aber wie hält man das click-Ereignis für die ganze div? event.stopPropogation() ist die Auslösung Schaltfläche klicken, gefolgt von div klicken.

InformationsquelleAutor Yuri Morales | 2013-07-25
  1. 18

    Dank für alles. Wie sagen robooneus.
    Ich habe nur diese:

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

    Und jetzt arbeitet. Vielen Dank an alle.

    InformationsquelleAutor Yuri Morales
  2. 9

    Für deine beiden buttons, erstellen Sie eine neue Funktion, und fügen Sie diesen code am Anfang :

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

    Dann fügen Sie Ihre eigenen code.

    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")'; 
}
    InformationsquelleAutor Antoine
  3. 6

    Tatsächlich beiden Aktionen(button 's und div' s) ausgelöst werden. Sie sollten aufhören, die Ausbreitung von Ereignissen mit
    stopPropagation/cancelBubble. Weiter Lesen über bubbling: http://javascript.info/tutorial/bubbling-and-capturing

    InformationsquelleAutor Sergey Kochetov
Schreibe einen Kommentar