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

Question

长话短说

请在此处查看演示。

我有几个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. 当一个气泡打开 1div.story-in-myworks然后光标打开 OTHERdiv.story-in-myworks的btn-storysetting12x12.png时，上一个气泡消失并隐藏相应的叠加层，但当前选定的div现在具有叠加层，并且当前选定的气泡出现div(完成)
8. 在不更改前 7 种行为中的任何一种的情况下，我希望能够单击导致另一种行为的div.story-in-myworks，例如导航到另一个网页。

请注意，那些标记(完成)已完成。请在此处查看演示。

我尝试并得到的结果

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

我需要什么

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

常见问题

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

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

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

披露

1. 我已经在这里交叉发布了同样的问题 css-tricks.com 以引起对我的问题的更多关注。

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