如果我想鼠标输入div,则会显示一个元素,然后当mouseleave,元素消失时。
我在mouseenter中有一个点击功能,所以点击时会有一个下拉菜单。
我希望下拉菜单和元素即使在mouseleaves时也能保持活动状态。因此,当有点击事件时,我希望鼠标在这种情况下不适用。用户必须再次点击页面上的元素,才能使元素和下拉菜单消失。
但是我想保持mouseleave功能正常工作,所以如果用户鼠标移动div,元素将显示,他们可以再次点击它。
我目前有类似的东西,但我不知道如何点击鼠标左键不适用
$(".div").mouseenter(function(){
$(".element",this).show();
$(".element").click(function(){
$(".dropdown").show();
return false;
});
}).mouseleave(function(){
$(".element",this).hide();
});
编辑:
HTML
<div class='div'>
<div class='element' style='display:none;'>
boxed element
</div>
<div class='dropdown' style='display:none;'>
menu
</div>
</div>
答案 0 :(得分:6)
这对我来说很有把戏
$("#id").click(function(){
$("#id").off("mouseleave");
});
答案 1 :(得分:4)
您可以设置自定义属性,以便将项目标记为已点击。 mouseleave事件处理程序可以在隐藏元素之前检查此自定义属性的值。
即。类似的东西:
$(".div").mouseenter(function(){
$(".element",this).show();
$(".element").click(function(){
$(".dropdown").show();
// set custom attribute for marking this one as clicked
$(this).attr('clicked', 'yes');
return false;
});
}).mouseleave(function(){
// check custom attribute before hiding the element
if($(this).attr('clicked') != 'yes') {
$(".element",this).hide();
}
});
答案 2 :(得分:0)
如果使用1.7 +
,可以使用jQuery的新开/关方法类似的东西:
$(".div").on('mouseenter', function(){
showElm();
$(".element").click(function(){
$(".div").off('mouseleave', hideElm);
$(".dropdown").show();
return false;
});
});
$(".div").on('mouseleave', hideElm);
$(document).on('click', hideElm);
function hideElm() { $(".element, .dropdown").hide(); }
function showElm() { $(".element").show(); }
小提琴:http://jsfiddle.net/fSjtm/
可能需要一些推文,但它会给你一个大致的想法。
答案 3 :(得分:0)
使用event.stopPropagation();
这样更好,因为您可以使用元素
上的链接
$(".div").on('mouseenter', function(){
showElm();
$(".element").click(function(event){
$(".div").off('mouseleave', hideElm);
$(".dropdown").show();
event.stopPropagation();
});
});
$(".div").on('mouseleave', hideElm);
$(document).on('click', hideElm);
function hideElm(event) { $(".element, .dropdown").hide(); }
function showElm(event) { $(".element").show(); }
&#13;
.element {position: absolute; top: 20px; height: 100px; width: 100px; display:none; background: red; }
.dropdown {position: absolute; top: 120px; height: 400px; width: 100px; background: blue; display:none;}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='div'>HERE
<div class='element'>
boxed element
</div>
<div class='dropdown'>
menu
</div>
</div>
&#13;
答案 4 :(得分:0)
您所引用的mouseleave事件似乎是由jquery点击而不是原始mouseEvent自定义触发的。试试这个:
$(".div").on('mouseenter', function(){
$(".element").on('click', function(){ ... });
});
$(".div").on('mouseleave', function(event){
if(typeof(e.originalEvent) != 'undefined'){
// only when mouseleave is the original event.
}
});