上一個div點擊錨

我在我的HTML有一個錨元素中時取消錨：上一個div點擊錨

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

此代碼將呈現這樣的：

的行爲是在確定一般來說，點擊這個錨點的任何地方都應該指引我到另一個頁面，但是我希望能夠點擊那些lightgrey貼圖[SL] [PL] [AE]併爲這些頁面顯示一個上下文菜單。什麼是乾淨的方法來改變這種行爲，以便我仍然可以點擊任何地方導航到somepage.html，除非我點擊這些瓷磚，導航不應該發生，而是激發一個JavaScript函數（然後將顯示一些上下文菜單）？

來源

2016-06-10 Andras

添加您的CSS ... –

這必須處理事件冒泡 – Observer

如果你使用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;

來源

2016-06-10 22:12:53 Greg01re

您可以使用stopPropagation事件方法：

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

這允許你停止從按鈕冒泡之外，並防止執行錨事件。我添加了preventDefault（），以避免默認的按鈕動作

來源

2016-06-10 22:14:28

上一個div點擊錨

回答

相關問題