Jquery 单击事件不触发CSS指针事件：无

我有两张图片，一张叠在另一张上面

img\u top

设置了“指针事件：无”，因此单击它将传递到

img\u bottom

。但是，如果我在

img\u top

上调用jQuery的

触发器（'click'）

，单击将不会传递到

img\u bottom

有人能解释一下为什么，并找到一种方法，使用jQuery的

触发器（'click'）

和CSS的

指针事件将点击传递到底部图像吗

以下是我正在使用的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
    #img_holder {
        position: relative;
        width: 20px;
        height: 20px;
    }

    #img_bottom {
        position: absolute;
        background: url('/images/cross.png');
        width: 16px;
        height: 16px;
        z-index: 1;
    }

    #img_top {
        pointer-events: none;
        position: absolute;
        background: url('/images/tick.png');
        width: 16px;
        height: 16px;
        z-index: 2;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        $(document).click(function() {
            alert('clicked');
            $("img_top").trigger('click');
        });

        $("#img_bottom").click(function() {
            alert('success');
        });
    });
</script>

<div id="img_holder">
    <div id="img_top"></div>
    <div id="img_bottom"></div>
</div>


#img_支架{
位置：相对位置；
宽度：20px；
高度：20px；
}
#img_底部{
位置：绝对位置；
背景：url（'/images/cross.png'）；
宽度：16px；
高度：16px；
z指数：1；
}
#img_顶部{
指针事件：无；
位置：绝对位置；
背景：url（'/images/tick.png'）；
宽度：16px；
高度：16px；
z指数：2；
}
$（文档）.ready（函数（）{
$（文档）。单击（函数（）{
警报（“点击”）；
$（“img_top”）.trigger（'click'）；
});
$（“#img_bottom”）。单击（函数（）{
警惕（“成功”）；
});
});
这是因为javascript中的事件会使DOM冒泡
img_bttom
是
img_top
的兄弟，因此事件永远不会对其产生气泡

您可以通过以下方式手动强制：

$("#img_top").click(function(event) {
    $("#img_botton").trigger(event);
})

这是正确的，但为什么一个“真正的”点击然后通过？以及如何模拟它？@AdrienHingert真正的点击通过，因为它是由浏览器的UI处理的，它查看鼠标位置并确定引发事件的正确元素。有没有任何方法可以“伪造”这一点按照我上面的例子，通过JS，我需要它通过一个图像，指针事件设置为无。您的示例跳过了这一点。您在OP
img_top中说“指针事件”设置为none，因此单击它将传递单击到img_bottom。但是，如果我在img_顶部调用jQuery的触发器（“单击”），单击将不会传递到img_底部。
此代码修复了该问题。