Отмена якоря при нажатии на DIV внутри якоря

Question

у меня есть элемент якорь в моем HTML:

<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> 

Этот код делает так:

поведение нормально в в общем, что щелчок на любом месте этого якоря должен направить меня на другую страницу, но я бы хотел щелкнуть по этим лампочкам [SL] [PL] [AE] и отобразить контекстное меню для них. Что такое чистый подход, чтобы изменить это поведение, чтобы я все еще мог щелкнуть в любом месте, чтобы перейти к somepage.html, за исключением случаев, когда я нажимаю на эти фрагменты, навигация не должна происходить и вместо этого запускать функцию javascript (которая затем отображала бы какое-то контекстное меню)?

Answer 1

Если вы используете JQuery, вы можете принять этот подход:

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

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

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

Тогда вы должны были бы написать

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

и стиль его с основным CSS.

Редактировать: Для поддержки старой версии IE вы также можете добавить это сразу после e.stopPropagation();

event.cancelBubble = true; 

Answer 2

Вы можете использовать stopPropagation метод события:

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

Это позволяет остановить кипящим от кнопки наружу, и предотвратить выполнение события якоря. Я добавляю preventDefault(), чтобы избежать действий кнопки по умолчанию