重叠项目的点击功能答案

【问题标题】：click function on overlapped items重叠项目的点击功能
【发布时间】：2013-12-22 12:11:45
【问题描述】：

我有这样的事情：

HTML

<body>
    <div>
        <p>Text</p>
    </div>
<body>

JQuery

$('div').click(function(){
    $(this).find('p').fadeToggle('fast');
});
$('body').click(function(){
    $('div').find('p').fadeOut();
});

如何防止点击前面的项目时点击后面的项目？

【问题讨论】：

【解决方案1】：

您可能需要event.stopPropagation() 或需要从click 事件处理程序返回false。

$('div').click(function(event){
    event.stopPropagation();
    $(this).find('p').fadeToggle('fast');
});

说明： 防止事件冒泡 DOM 树，防止任何父处理程序收到事件通知。

【讨论】：

【解决方案2】：

要阻止事件传播，您需要从事件处理程序中return false。

$('div').click(function(){
  $(this).find('p').fadeToggle('fast');
  return false;
});

【讨论】：

【解决方案3】：

我没有使用 jQuery 的经验，但这很有效：

$('div').click(function(){
    $(this).find('p').fadeToggle('fast');
});

而不是

$('div').click(function(){
    $(this).find('p').fadeToggle('fast');
});
$('body').click(function(){
    $('div').find('p').fadeOut();
});

【讨论】：