停止点击图层

我有一个图层作为背景，另一个坐在背景图层上的图层（图标）都具有不同的功能。停止点击图层

当我点击图标时，图标的功能起作用，它也通过背景层工作。这不是预期！如何让点击只能在图标上工作，不会通过背景图层？谢谢。

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}

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

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

来源

2015-02-05 abcid d

您可以使用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()事件。很多人只是倾向于用e缩短event，因为stopPropation()只是在click(function(){});中调用function()的参数事件时被调用。

为了说明，我刚刚在Fiddle中为click()事件添加了控制台日志消息console.log(e);。当你点击.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/

来源

2015-02-05 22:01:53

谢谢，Matthias非常感谢您的帮助！它按预期工作。你可以在这个函数中解释'e'吗？谢谢。 – 2015-02-06 01:33:09

@abcidd很高兴我能够帮助你。我刚刚在函数中更新了我的答案，并解释了函数中的'e'，因为将它作为注释发布太长。 – 2015-02-06 20:47:01

非常感谢，Matthias！你的解释非常清楚直接。 – 2015-02-09 14:01:01

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

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

来源

2015-02-05 22:01:45

非常感谢你，杰里米！是的，它效果很好。 – 2015-02-09 13:54:59

停止点击图层

回答

相关问题