如何将 Hover、Out、Click 事件组合在一起答案

【问题标题】：How to combine Hover, Out, Click event together如何将 Hover、Out、Click 事件组合在一起
【发布时间】：2012-06-13 02:42:14
【问题描述】：

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/

【问题讨论】：

你的悬停不工作:(我不确定你是否能够通过像这样链接它们来附加多个事件

标签： javascript jquery events delegates

【解决方案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;
});

【讨论】：

@LeeR - 我是这里的新手。不过谢谢。 :)
@LeeR - 有没有其他方法可以使用$(document).click(function(e){，因为当我用我的项目实施时它会出错
@user1060990 它给了你什么错误？您可以尝试$('html, body')，但不说明您的错误是什么，这会使调试变得困难。

【解决方案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

【讨论】：

感谢您的输入，现在鼠标悬停和移出的问题请在此处查看。 jsfiddle.net/qGJH4/61 第一次运行良好
很抱歉。没有看到那条线...我已经用示例链接更新了答案。