jquery - 防止内部div继承

Question

我在另一个里面有一个 DIV，我想防止内部 div 从容器 DIV 继承光标 css。并防止内部 DIV 上的 jQuery 单击功能。

<div id="page_wrapper">

    <div id="content_wrapper">
        Lorum Ipsum<br />
        Lorum Ipsum<br />
        Lorum Ipsum
    </div> 

</div>

CSS

#page_wrapper {
    z-index:1;
    background-color:#ccc;
    padding:20px;
    cursor:pointer;
}
#content_wrapper {
    z-index:20;
    width:300px;
    margin:0 auto;
    background-color:#fff;
    padding:20px;
}

jQuery

<script>
$("#page_wrapper").click(function() {
       alert("Clicked!");
});
</script>

在这里试试：http: //jsfiddle.net/digisol/eUpXk/

Answer 1

尝试这个：

$("#content_wrapper").css('cursor', 'default').click(function(e) {
     e.stopPropagation();
});

在这里演示

Answer 2

进行以下两项更改：

jQuery：

$("#page_wrapper").click(function(e) {
       if(e.target === this) alert("Clicked!");
});

CSS

#content_wrapper {
    z-index:20;
    width:300px;
    margin:0 auto;
    background-color:#fff;
    padding:20px;
    cursor: default; /* NEW */
}

jsFiddle 示例