Abbrechen der Anker, wenn auf einem div innerhalb der Anker klicken

Question

ich ein Ankerelement in meinem html haben:

<a class="info-tiles tiles-inverse has-footer" href="somepage.html?id=15"> 
    <div class="tiles-heading"> 
    <div class="pull-left">IT Department - Hosting environment</div> 
    </div> 
    <div class="tiles-body"> 
    <div class="nav-justified" style="font-size: small;">Started: 19-05-2015 07:00</div> 
    <div class="btn btn-sm btn-default pull-right">AE</div> 
    <div class="btn btn-sm btn-default pull-right">PJ</div> 
    <div class="btn btn-sm btn-default pull-right">SL</div> 
    </div> 
    <div class="tiles-footer"> 
    <div class="progress"> 
     <div class="progress-bar progress-bar-info" style="width: 20%"></div> 
    </div> 
    </div> 
</a> 

Dieser Code macht wie folgt aus:

Das Verhalten ok ist in Generell sollte das Klicken auf eine beliebige Stelle in diesem Anker mich zu der anderen Seite führen, aber ich würde gerne in der Lage sein, auf diese hellgrauen Kacheln [SL] [PL] [AE] zu klicken und ein Kontextmenü für diese anzuzeigen. Was ist ein sauberer Ansatz, um dieses Verhalten zu ändern, so dass ich immer noch irgendwo klicken kann, um zur somepage.html zu navigieren, außer wenn ich auf diese Kacheln klicke, sollte die Navigation nicht passieren und stattdessen eine JavaScript-Funktion auslösen (die dann angezeigt wird) etwas Kontextmenü)?

Answer 1

Wenn Sie jQuery verwenden, können Sie diesen Ansatz zu übernehmen wollen:

$(".btn.btn-sm.pull-right").on("click", function(e) { 
    e.stopPropagation(); 

    $(this).find(".context-menu").toggle(); 

    e.preventDefault(); 
    return false; 
}); 

Dann brauchen Sie würde eine

<div class="context-menu"> 
    <ul> 
     <li>Element</li> 
    </ul> 
</div> 

und Stil es mit grundlegenden CSS zu schreiben.

Bearbeiten: Um ältere Version von IE zu unterstützen, können Sie auch hinzufügen, dass direkt nach dem e.stopPropagation();

event.cancelBubble = true; 

Answer 2

können Sie stopPropagation Ereignismethode verwenden:

$('selector').on('click', function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     // your actions 
}); 

Auf diese Weise können Sie von der Taste nach außen sprudeln stoppen und verhindern, dass der Anker Ereignis auszuführen. Ich füge protectDefault() hinzu, um Standardknopfaktionen zu vermeiden