当孩子悬停在父母之上时，如何为父元素和子元素分配不同的行为？

Question

长话短说

请参阅演示here。

我有几个div.story-in-myworks

在每个div.story-in-myworks内，有div.pageimage-div-overlay控制每个div.story-in-myworks的叠加层。

在每个div.pageimage-div-overlay内，a.btn-storysetting负责隐藏和显示div.storysettings_talkbubble_left。

a.btn-storysetting和div.storysettings_talkbubble_left都是div.pageimage-div-overlay的子元素。

这是一个片段：

<div class="img-holder story-in-myworks " rel="91" style="background: url('img/01d-0.jpg?1353745136') no-repeat; background-size: cover; border: 1px solid #DCDDDE">
            <div class="pageimage-div-overlay">
                <a class="btn-storysetting" href="#"><span></span></a>
                <div class="storysettings_talkbubble_left settings-bubble border-radius-5 hidden talkbubble-padding">

基本问题是当我点击div.story-in-myworks或div.pageimage-div-overlay时我想要一个不同的行为，它不会影响a.btn-storysetting的点击事件处理程序

我想要完成的事情

1. 当光标移动到任何单个div.story-in-myworks时，覆盖显示在div （已完成）
上方
2. 当光标移动到任何单个div.story-in-myworks时，图像（btn-storysetting12x12.png）会出现在右上角（已完成）
3. 左键单击btn-storysetting12x12.png时，图像旁边会出现气泡。的（完成）
4. 当气泡出现时，所选的div.story-in-myworks会继续显示叠加外观（已完成）
5. 在气泡出现后，然后左键单击文档中的任何其他位置，气泡关闭，div.story-in-myworks恢复正常，不会覆盖（已完成）
6. 气泡出现后，光标可以离开气泡，气泡保持可见状态，所选div.story-in-myworks的覆盖图仍然存在。的（完成）
7. 当为1 div.story-in-myworks打开气泡，然后光标打开另一个btn-storysetting12x12.png div.story-in-myworks时，前一个气泡消失，相应的叠加层被隐藏，但当前选中的{{} 1}}现在有了叠加层，并且当前所选的div （已完成）
会显示气泡
8. 如果不更改之前的7个行为，我希望能够点击导致其他行为的div，例如，导航到其他网页。

请注意，标有（已完成）的标签已完成。请参阅演示here。

我尝试和得到的结果

我试图做到8但规则2-7会立即被打破。

我需要什么

一种在不破坏任何其他条件的情况下满足所有8项要求的方法。

常见问题

1. 这是你的完整应用吗？

没有。我做了一个简化的测试用例，我删除了尽可能多的不必要的代码来解释我的问题，而不会影响问题陈述。

您可以通过注意演示中的谈话气泡内的链接没有样式来判断。

披露

1. 我在css-tricks.com上通过here交叉发布了同样的问题，以便更加关注我的问题。

Answer 1

以下链接描述了如何识别点击事件的来源并相应地执行。

Link

这段代码似乎有用，但我还没有找到为什么它在第一次加载时会触发两次。

$(".story-in-myworks").mouseenter(function(e){
    var currentStory = $(this);

    $(this).click(function(e){
        if ($(e.target).hasClass('pageimage-div-overlay'))
            alert('test');

        if ($(e.target).hasClass('btn-storysetting')){
            alert('test2');

        }
    });
});