Стоп Щелчок через слой

Question

У меня есть один слой в качестве фона и другой слой (значок), сидящий на фоновом слое, оба имеют разную функциональность.

Когда я нажимаю на значок, функция значка работает, и она также работает через фоновый слой. Этого не ожидается! Как получить щелчок работает только на значке, а не на фоновом слое? Благодарю.

LIVE CODE

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 в этой функции: если вы проверить предоставленную ссылку на API JQuery вы заметите, что там написано, как следует для примера, приведенного:

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

Обратите внимание, что это не нужно явно написать function(event) - параметр функции в этих обозначениях являетсяclick() события. Многие люди склонны сокращать event с e, так как stopPropation() только что вызвано событием, которое является параметром function(), вызванным в click(function(){});.

Для иллюстрации я только что добавил сообщение журнала console.log(e); в этом Fiddle для события 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'); 
    } 
);