Question

var bar = $('.div_layer_Class');
  $('a.second_line').click(function() {
      $(this).unbind('mouseout');
  }).mouseover(function() {
      bar.css('display','inline');
  }).mouseout(function() {
      bar.css('display','none');
  });

现在问题'onBodyclick'当我再次点击身体上的任何地方时我想调用mouseoutevent这样的东西

$('body').click(function() {
      bar.css('display','none');
 event.preventDefault();

  });

当我这样做时，它重叠$('a.second_line').click(function()事件。我知道如何实现这一点。

http://jsfiddle.net/qGJH4/56/

Answer 1

除了e.stopPropagation()之外，你可以做两件事：

创建一个变量来引用mouseout事件处理程序，这样只要用户单击其他位置，就可以重新绑定它。或
存储a.second_line是否为焦点的变量。就像是 var focused = false;

您现在的代码是：

var bar = $('.div_layer_Class');
var focused = false;
$('a.second_line').click(function(e) {
    focused = true;
    e.stopPropagation();
}).mouseover(function() {
    bar.css('display','inline');
}).mouseout(function() {
    if (!focused)
        bar.css('display','none');
});

$(document).click(function(e){
    bar.css('display','none');
    focused = false;
});

Answer 2

Example here 尝试将代码更改为此

var bar = $('.div_layer_Class');
$('a.second_line').click(function(e) {
    bar.addClass('on');
    e.stopPropagation();
}).mouseover(function() {
    bar.css('display','inline');
}).mouseout(function() {
   if(!bar.hasClass('on'))
       bar.css('display','none');
});

$(document).on('click',function(){
  bar.removeClass('on');
  bar.css('display','none');
  //return false;
});

要看两行，首先是function(e)

中的e

$('a.second_line').click(function(e) {

和停止e.stopPropagation();

这基本上会阻止任何父处理程序被通知。 Read here

如何将Hover，Out，Click事件组合在一起

2 个答案: