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

Question

长话短说

请看演示这里。

我有几个div.story-in-myworks

在每个div.story-in-myworks中，有一个div.pageimage-div-overlay控制每个div.story-in-myworks的覆盖。

在每个div.pageimage-div-overlay中都有一个负责隐藏和显示div.storysettings_talkbubble_left的a.btn-storysetting。

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.stall-in-myworks或div.pageimage-div-overlay时，我想要一种不同的行为，这不会影响a.btn-storysetting的单击事件处理程序。

我想要完成的

1. 当光标移动到任何一个div.story-in-myworks中时，会在div (done)上显示一个覆盖。
2. 当光标移动到任意一个div.story-in-myworks中时，图像(btn-storysetting12x12.png)出现在右上角(done)中。
3. 当左键点击btn-storysetting12x12.png时，一个气泡就会出现在图像的右边。(完成)
4. 当气泡出现时，所选的div.story-in-myworks继续显示覆盖外观(done)
5. 当气泡出现，然后在文档中的任何地方单击鼠标左键，气泡关闭，div.story-in-myworks恢复正常，而不需要覆盖(完成)。
6. 气泡出现后，光标可以离开气泡，气泡保持可见，并且选择的div.story-in-myworks的覆盖保持不变。(完成)
7. 当为1 div.story-in-myworks打开一个气泡，然后光标打开另一个div.story-in-myworks的btn-storysetting12x12.png时，前面的气泡消失，相应的覆盖被隐藏，但是当前选定的div现在有覆盖，并且当前选择的div (done)出现了这个气泡。
8. 在不改变前面7种行为的情况下，我希望能够点击div.story-in-myworks，这会导致另一种行为，例如导航到另一个网页。

注意，标记为(Done)的已经完成。请看演示这里。

我的努力和得到的结果

我试着做8，但是第2-7条规则马上就被打破了。

我所需要的

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

常见问题

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

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

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

披露

1. 我已经在这里上交叉发布了同样的问题，希望能更多地关注我的问题。

Answer 1

下面的链接描述了如何标识单击事件的起源并相应地执行。

链接

这段代码似乎有效，尽管我还没有发现为什么它在第一次加载时触发两次。

$(".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');

        }
    });
});