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

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功能于myworks或div.pageimage-DIV-覆盖不影响点击对于a.btn-storysetting

我想要完成

1. 当光标移动到任何一个div.story-in-myworks什么事件处理程序，覆盖了出现该div（完成）当光标移动到任何单个div.story-in-myworks
2. ，图像（btn-storysetting12x12.png）显示在右上角（完成）
3. 当在btn-storysetting12x12.png左点击，会出现一个气泡旁边图片。 （完成）出现泡沫时
4. ，选择div.story-in-myworks继续呈现叠加看（完成）
5. 出现泡沫后，然后左键点击其他地方在doc，泡沫关闭，div.story-in-myworks去在没有覆盖层的情况下恢复正常（完成）
6. 气泡出现后，光标可以离开气泡并且气泡保持可见状态，并且保留所选div.story-in-myworks的覆盖层。 （完成）
7. 当气泡被打开1 div.story-in-myworks，然后光标打开另一个div.story-in-myworks的btn-storysetting12x12.png，以前的气泡会消失，相应的覆盖是隐藏的，但当前选择div现在具有叠加和显示的气泡对于当前选择的div（完成）
8. 不改变任何前7行为，我希望能够点击div.story-in-myworks这导致另一种行为，例如，导航到另一个网页。

请注意那些标记为（完成）完成。请参阅演示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'); 

     } 
    }); 
});