Eu tenho um menu suspenso Twitter Bootstrap. Como todos os usuários do Twitter Bootstrap sabem, o menu suspenso se fecha ao clicar (mesmo clicando dentro dele).
Para evitar isso, posso anexar facilmente um manipulador de eventos de clique no menu suspenso e simplesmente adicionar o famoso event.stopPropagation()
.
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu item 1
<span class="fa fa-chevron-down pull-right"></span>
</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel"
class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel"
class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</li>
</ul>
</li>
</ul>
Isso parece fácil e um comportamento muito comum, no entanto, e como carousel-controls
(assim como carousel indicators
) os manipuladores de eventos são delegados ao document
objeto, o click
evento nesses elementos ( controles anteriores / próximos , ...) será "ignorado".
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
// The event won't be propagated up to the document NODE and
// therefore delegated events won't be fired
event.stopPropagation();
});
Contar com o menu suspenso hide
/ hidden
eventos do Bootstrap do Twitter não é uma solução pelos seguintes motivos:
- O objeto de evento fornecido para os dois manipuladores de eventos não fornece referência ao elemento clicado
- Como não tenho controle sobre o conteúdo do menu suspenso,
flag
não é possível adicionar uma classe ou atributo
Este violino é o comportamento normal e esse violino é event.stopPropagation()
adicionado.
Atualizar
Agradeço a Roman por sua resposta . Eu também encontrei uma resposta que você pode encontrar abaixo .
event propagation
item foi parado.