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();
});

DEMO HERE

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 example

防止内部div继承

2 个答案: