how to assign different behavior to parent and child elements when child is hovering on top of parent?

Question

Long story short

Please see the demo here.

I have several div.story-in-myworks

inside each div.story-in-myworks, there is a div.pageimage-div-overlay that controls the overlay over each div.story-in-myworks.

Inside each div.pageimage-div-overlay there is a a.btn-storysetting responsible for hiding and showing a div.storysettings_talkbubble_left.

both a.btn-storysetting and div.storysettings_talkbubble_left are child elements of div.pageimage-div-overlay.

Here is a snippet:

<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">

The basic issue is I want a different behavior when I click on div.story-in-myworks OR div.pageimage-div-overlay which does NOT affect the click event handler for a.btn-storysetting

What I wanted to accomplish

1. when cursor moves into any single div.story-in-myworks, an overlay appears over that div (done)
2. when cursor moves into any single div.story-in-myworks, an image (btn-storysetting12x12.png) appears at the top right hand corner (done)
3. when left click on the btn-storysetting12x12.png, a bubble appears right next to the image. (done)
4. when the bubble appears, the selected div.story-in-myworks continues to exhibit the overlay look (done)
5. After the bubble appears and then left click anywhere else in the doc, the bubble closes and div.story-in-myworks goes back to normal without the overlay (done)
6. After the bubble appears, cursor can leave the bubble and the bubble stay visible and the overlay for the selected div.story-in-myworks remains. (done)
7. When a bubble is opened for 1 div.story-in-myworks and then cursor opens the btn-storysetting12x12.png of ANOTHER div.story-in-myworks, the previous bubble disappears and the corresponding overlay is hidden, but the currently selected div now has the overlay and the bubble appears for the currently selected div (done)
8. Without changing any of the previous 7 behavior, I want to be able to click on the div.story-in-myworks which leads to another behavior e.g., navigating to another webpage.

Note that those marked (done) are accomplished. Please see the demo here.

What I tried and gotten as a result

I tried to do 8 but rule 2 - 7 will be instantly broken.

What I need

A way to accomodate all 8 requirements without breaking anything else.

FAQs

1. is this your full app?

No. I did a reduced test case where i stripped out as much un-necessary code to explain my problem without affecting the problem statement as possible.

You can tell by noticing that there is no stylings for the links inside the talk bubbles in the demo.

Disclosure

1. I have cross-posted this same question at css-tricks.com over here to gather greater attention to my problem.

Answer 1

The link below describes how to identify the origin of the click event and execute accordingly.

Link

This piece of code seems to work, though I haven't found out why it triggers twice on first load.

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

        }
    });
});