javascript - 如何将 Hover、Out、Click 事件组合在一起

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()，您还可以做 2 件事：

• 创建一个变量来引用 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

此处的示例 尝试将您的代码更改为此

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;
});

看两行，第一，e infunction(e)

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

和停止e.stopPropagation();

这基本上会阻止通知任何父处理程序。在这里阅读