不允許被點擊

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

爲此，您可以通過多種方式

這僅僅是可以排除子元素的例子（s）來自父母。

$(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>