1

私は2つの画像を上下に重ねています。img_top'pointer-events: none' が設定されているため、クリックすると にクリックが渡されますimg_bottom。ただし、jQuery のtrigger('click')onを呼び出すimg_topと、クリックは に渡されませんimg_bottom。

誰かが理由を説明し、jQuery のtrigger('click')AND CSSを使用してクリックを下の画像に渡す方法を見つけることができますpointer-eventsか?

私が使用しているコードは次のとおりです。 

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

1 に答える 1

3

これは、JavaScriptイベントでDOMがバブルアップするためです。img_bttomはの兄弟でimg_topあるため、イベントが発生することはありません。

ただし、手動で強制することができます。

$("#img_top").click(function(event) {
    $("#img_botton").trigger(event);
})
于 2012-10-24T15:22:25.093 に答える