Question

我有一个图层作为背景，另一个图层（图标）坐在背景图层上，两者都有不同的功能。

当我点击图标时，图标的功能起作用，它也可以通过背景层工作。这不是预期的！如何让点击仅适用于图标，而不是通过背景图层？感谢。

HTML

<div class="redBG">
    <div class="yellowIcon"></div>
</div>

CSS

.redBG{
    background-color:red;
    width: 300px;
    height:30px;
    z-index: 1;
}
.grayBG{
    background-color: gray;
}

.yellowIcon{
    background-color:yellow;
    width: 20px;
    height:20px;
    cursor: pointer;
    z-index:20;
}
.greenBG{background-color:green}

JS

$('.redBG').click(
    function(){
        $(this).toggleClass('grayBG');
    });

$('.yellowIcon').click(
    function(){
        $(this).toggleClass('greenBG');
    }
);

Answer 1

您可以像这样使用stopPropagation()：

$('.redBG').click(

function () {
    $(this).toggleClass('grayBG');
});

$('.yellowIcon').click(

function (e) {
    e.stopPropagation();
    $(this).toggleClass('greenBG');
});

.redBG {
    background-color:red;
    width: 300px;
    height:30px;
    z-index: 1;
}
.grayBG {
    background-color: gray;
}
.yellowIcon {
    background-color:yellow;
    width: 20px;
    height:20px;
    cursor: pointer;
    z-index:20;
}
.greenBG {
    background-color:green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="redBG">
    <div class="yellowIcon"></div>
</div>

event.stopPropagation()可防止事件冒泡DOM树。供参考：http://api.jquery.com/event.stoppropagation/

对于注释中的问题来解释此函数中的e：如果您检查提供的jQuery API链接，您会注意到它提供的示例如下所示：

$( "p" ).click(function( event ) {
  event.stopPropagation();
  // Do something
});

请注意，没有必要显式写function(event) - 此符号中的函数参数是 click()事件。很多人倾向于使用event缩短e，因为stopPropation()只是在function()调用click(function(){});的参数时被调用。

为了说明，我刚刚在此Fiddle中为console.log(e);事件添加了控制台日志消息click()。当您点击.yellowIcon时，您会注意到控制台消息

Object { originalEvent=Event click, type="click", ....}

所以e只是传递的click()事件对象如果您将click()更改为例如hover()，控制台消息是

Object { originalEvent=Event mouseover, type="mouseenter", ...}
Object { originalEvent=Event mouseover, type="mouseleave", ...}

有关更多详细信息，请查看http://api.jquery.com/category/events/event-object/

Answer 2

更改$('.yellowIcon').click()功能：

$('.yellowIcon').click(
    function(e){
        e.stopPropagation();
        $(this).toggleClass('greenBG');
    }
);

停止单击图层

2 个答案: