2

长话短说

请在此处查看演示。

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

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

我尝试并得到的结果

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

我需要的

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

常见问题

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

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

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

披露

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

1 回答 1

2

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

关联

这段代码似乎可以工作，虽然我还没有弄清楚为什么它在第一次加载时会触发两次。

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

        }
    });
});
于 2012-12-17T12:39:33.597 回答