J'ai un menu déroulant Twitter Bootstrap. Comme tous les utilisateurs de Twitter Bootstrap le savent, le menu déroulant se ferme au clic (même en cliquant à l'intérieur).
Pour éviter cela, je peux facilement attacher un gestionnaire d'événements de clic dans le menu déroulant et simplement ajouter le célèbre 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>
Cela semble facile et un comportement très courant, cependant, et puisque carousel-controls
(ainsi que carousel indicators
) les gestionnaires d'événements sont délégués à l' document
objet, l' click
événement sur ces éléments ( contrôles prev / next , ...) sera "ignoré".
$('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();
});
S'appuyer sur Twitter Bootstrap dropdown hide
/ hidden
events n'est pas une solution pour les raisons suivantes:
- L'objet événement fourni pour les deux gestionnaires d'événements ne fait pas référence à l'élément cliqué
- Je n'ai aucun contrôle sur le contenu du menu déroulant, il
flag
n'est donc pas possible d' ajouter une classe ou un attribut
Ce violon est le comportement normal et ce violon est event.stopPropagation()
ajouté.
Mettre à jour
Merci à Roman pour sa réponse . J'ai également trouvé une réponse que vous pouvez trouver ci-dessous .
event propagation
arrêt du.