JS/JQuery: 无法触发与位于另一个元素上方的元素关联的事件

Question

我有一个元素 #i1，它位于另一个元素 .close_button 下方，它们每个都有一个与之关联的点击事件...前者称为 clickFade()而后者的事件是在上述 clickFade().

的执行中定义的匿名函数

当通过单击 #i1 调用 clickFade() 时，父级 div、#welcome 的透明度为 .1，而 #A 的透明度为淡入。此外，为 #i1 调用 unbind() 并定义了上述与 .close_button 上的单击事件关联的匿名函数。当单击 close_button 图像时，此函数只是反转 clickFade() 的效果。

我不认为问题是 z-index 问题（因为我已经尝试过并且 close_button 图像总是在顶部可见）。我也不认为这是一个有约束力的问题，因为按钮有效，但只有当它下面没有任何东西时......例如，如果按钮半重叠背景图像之一，如 #i1，那一半不在上面 #i1 会触发事件，而另一半不会。

这里有什么问题，我该如何解决？

以下是 HTML, CSS, and JS 的要点；这是相关代码：

HTML:

<div id="welcome">
    <p id="welcomeText">Welcome</p>
    <img src="imgs/img1.jpg" id="i1" alt=null/>
</div>

<div id="A">
    <img src='imgs/close_button.gif' class='close_button' alt=null
    style="width: 10%; height: 10%"/>
</div>

JS:

function clickFade() {
    $('#welcome').fadeTo('slow',.1);
    $('#i1').unbind('click',clickFade);
    $('#i1').unbind('mouseover',mouseOverFunc);
    switch (this.id) {
        case "i1":
            $('#A').fadeIn('slow');
            $('.close_button').click(function() {
                $('#A').fadeOut('slow');
                $('#welcome').fadeTo('slow',1);
                $('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
            });
            break;
        .
        .
        .
    }

}

Answer 1

所以你们都必须设置 z-index 并设置 position:relative 才能工作。

z-index not working with fixed positioning 等。祝你好运！

JS/JQuery: 无法触发与位于另一个元素上方的元素关联的事件

JS/JQuery: Can't trigger an event associated with an element that is above another element

events

overlay

click

elements