当孩子悬停在父母之上时，如何为父元素和子元素分配不同的行为？ [英] how to assign different behavior to parent and child elements when child is hovering on top of parent?

问题描述

长篇小说

请参阅演示这里。

我有几个 div.story-in-myworks div.story-in-myworks 中的code $ div.pageimage-div-overlay ，用于控制每个 div.story-in-myworks 之间的覆盖。

每个 div.pageimage-div-overlay 里面有一个 a.btn-storysetting 负责隐藏并显示一个 div.storysettings_talkbubble_left 。

both a.btn-storysetting 和 div.storysettings_talkbubble_left 是 div.pageimage-div-overlay 的子元素。 / p>

这是一个代码片段：

 < div class =img持有人在我的作品中rel =91style =background：url（'img / 01d-0.jpg？1353745136'）no-repeat; background-si zeㄧ;边框：1px solid #DCDDDE> 
< div class =pageimage-div-overlay> 
 < div class =storysettings_talkbubble_left settings-bubble border-radius-5 hidden talkbubble-padding> 
  / pre> 
 
 
当我点击div.story-in-myworks或div.pageimage-div-overlay时，我想要一个不同的行为，这不会影响点击事件处理程序 a.btn-storysetting  
 
 
 
我想要完成什么
 
 
 
 
 
当光标移动到任何一个 div.story-in-myworks 中时，覆盖显示在<$ c $当光标移动到任何一个 div.story-in-myworks中时，c> div  （done） 
 
 < ，图像（ btn-storysetting12x12.png ）出现在右上角（完成）  
 
左键单击 btn-storysetting12x12.png ，图像旁边会出现一个气泡。 （done） 
 
 
当泡沫出现时，所选的 div.story-in-myworks 继续展示重叠式样（完成） 
 
 
气泡出现后，然后左键单击文档中的其他位置，气泡关闭， div .story-in-myworks 恢复正常，没有覆盖（完成） 
 
 
气泡出现后，光标可以离开气泡和泡沫保持可见，并且所选的 div.story-in-myworks 的覆盖保留。 （完成） 
 
 
当1  div.story-in-myworks 光标会打开另一个 div.story-in-myworks 的 btn-storysetting12x12.png ，上一个泡沫消失，相应的叠加层被隐藏，但是当前选择的 div 现在具有覆盖，并且当前选择的 div  c> strong>（done） 
 
 
如果没有更改以前的7种行为，我想要点击 div.story-in- myworks 导致另一个行为，例如导航到另一个网页。
 
 
请注意，标记为 （完成）完成。请参阅此处的演示。
 
 
 
我尝试并得到结果
 
 
 
我试图做8，但规则2  -  7将立即被打破。 p> 
 
 
我需要什么
 
 
 
一种满足所有8项要求而不打破任何其他要求的方式。
 
 
 
常见问题
 
 
 
 
 
这是您的完整应用吗？
 
 
不。我做了一个减少的测试用例，我删除了不必要的代码来解释我的问题，尽可能不影响问题陈述。
 
 
 
你可以注意到那里
 
 
 
披露
 
 
 
 
 <我已经在css-tricks.com上跨过这个同样的问题，通过 here 可以更加重视我的问题。 
 
 
 
解决方案
下面的链接介绍如何识别点击事件的起源并相应执行。
 
 
 
 链接 
 
 
 
这段代码似乎工作， h我没有找到为什么在第一次加载时触发两次。
  $（。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'）; 
 
} 
}）; 
}）; 
  
 
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


when cursor moves into any single div.story-in-myworks, an overlay appears over that div (done)
when cursor moves into any single div.story-in-myworks, an image (btn-storysetting12x12.png) appears at the top right hand corner (done)
when left click on the btn-storysetting12x12.png, a bubble appears right next to the image. (done)
when the bubble appears, the selected div.story-in-myworks continues to exhibit the overlay look (done)
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)
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)
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)
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


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


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

解决方案
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');

        }
    });
});


                        
这篇关于当孩子悬停在父母之上时，如何为父元素和子元素分配不同的行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！