Не допускать дочерние элементы, чтобы быть нажаты

Question

у меня есть элементы, как этот

<div class="parent-component"> 
    <div class="form-group"> 
     <label for="my-input">Label</label> 
     <input type="text" name="my-input" id="my-input" class="form-control"> 
    </div> 
</div> 

Я прилагаю щелчок слушатель JQuery on метода родителя следующего

$(document).on("click", ".parent-component", function() { 
    // ... 
}) 

Где я когда-либо нажмите внутри .parent-component срабатывает прослушиватель событий. Тем не менее, нажатие на вход - или любой интерактивный элемент (ссылки, кнопки, входы) в этом отношении - он становится активным.

Как заблокировать элемент внутри .parent-component от щелчка, чтобы у меня есть входы и ссылки внутри него, которые невозможно щелкнуть?

Answer 1

pointer-events, заслуга @Tibos

$(document).on("click", ".parent-component", function(e) { 
 
    console.log('click on: ' + e.target.className); 
 
});

.no-click { 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent-component"> 
 
    <div class="form-group no-click"> 
 
     <label for="my-input" style="pointer-events: none" >Label</label> 
 
     <input type="text" name="my-input" id="my-input" class="form-control" /> 
 
     <span>This still sends clicks to parent</span> 
 
    </div> 
 
</div>

Answer 2

Обычно это поведение желательно; щелчок на дочернем элементе также является щелчком по его родительским и предковым элементам, таким же образом, что вы не можете находиться в своей ванной, не будучи также в своем доме.

Если вы хотите защититься от ребенка/потомках кликов, однако, вы можете сделать это:

$(document).on("click", ".parent-component", function(evt) { 
    if (!$(evt.target).is('.parent-component')) return false; 
    //beyond here, we can be sure the element was to the parent directly, 
    //not any children/descendants 
}) 

Answer 3

другой альтернативы, так что вы можете использовать в разных местах, ..

Является ли для управляет тем, что вы не хотите распространять события, вы можете создать класс и настроить его и сообщить им, чтобы они не распространяли события.

Преимущество состояло в том, что у вас есть некоторые элементы управления, которые вы хотите распространять событиями вы можете покинуть класс.

например ..

$(document).on("click", ".parent-component", function(e) { 
 
    console.log('click'); 
 
}); 
 

 
$(document).on('click', '.no-propagate', function (e) { e.stopPropagation(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent-component"> 
 
    <div class="form-group"> 
 
     <label class="no-propagate" for="my-input">Label</label> 
 
     <input class="no-propagate" type="text" name="my-input" id="my-input" class="form-control"> 
 
     <span>This still sends clicks to parent</span> 
 
    </div> 
 
</div>

Answer 4

Вы можете проверить, если целевой элемент, который щелкнул, имеет некоторый класс, и только потом, по-прежнему.

$(document).on("click", '.someClass', function(e){ 
    if(e.target.classList.contains('someClass')) return false; 
}) 

Answer 5

Вы можете сделать это несколькими способами

Это просто пример того, вы можете исключить дочерний элемент (ы) от родителя.

$(document).ready(function(){ 
 
    $(document).on('click', '.main', function(e){ 
 
    alert('Parent was clicked'); 
 
    }).find('.child').on('click', function(){ 
 
    
 
    return false; 
 
    }); 
 

 
});

.main{ 
 
    background: orangered; 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    height: 400px; 
 
    width: 400px; 
 
    padding: 10px; 
 
} 
 

 
.child{ 
 
    background: green; 
 
    color: white; 
 
    margin: auto; 
 
    height: 40%; 
 
    width: 40%; 
 
    padding: 10px; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='main'> 
 
    Click me and I will fire up something 
 
    <div class='child'> 
 
    If you click on me I will not fire..... 
 
    I am the child you cannot click me 
 
    </div> 
 
    
 
    </div>

Другой способ

$(document).ready(function(){ 
 
    $(".main").click(function(){ 
 
    alert('Parent was clicked'); 
 
    }).children().click(function(){ 
 
    
 
    return false; 
 
    }); 
 

 
});

.main{ 
 
    background: orangered; 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    height: 400px; 
 
    width: 400px; 
 
} 
 

 
.child{ 
 
    background: green; 
 
    color: white; 
 
    margin: auto; 
 
    height: 40%; 
 
    width: 40%; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='main'> 
 
    Click me and I will fire up something 
 
    <div class='child'> 
 
    If you click on me I will not fire..... 
 
    This is the child you cannot click me 
 
    </div> 
 
    
 
    </div>