jQuery选择器可否定父元素中的特定HTML元素

Question

I have HTML label structures generated by a JQuery multiselect dropdown library as shown:

<label for="ui-multiselect-selectedSku-option-1"><input id="ui-multiselect-dropdown-option-1" type="radio" value="DropDownVal1"><span>DropDownText1</span></label>
<label for="ui-multiselect-selectedSku-option-2"><input id="ui-multiselect-dropdown-option-2" type="radio" value="DropDownVal2"><span>DropDownText2</span></label>

My requirement is: except the input element, whenever the user clicks on anywhere else in the

<label></label>

(including the label) area,I need to do event.preventDefault() . I have tried as

 $(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"]',function(event){
    event.preventDefault();
});

But the above handler gets triggered even when I click on the <input> within the label as well(which is obvious and I know that!)

How do I write a JQuery selector for to filter this.

Answer 1

The best thing would be to have the input out of the label... But:

I do not have control over this markup structure... (your comment on another answer)

You can use .stopImmediatePropagation() on the <input> elements... So the click event won't bubble up to the label.

See below... Try a click a label, then on a radio.

 $(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"]',function(event){ console.log("Clicked on a label"); event.preventDefault(); // Don't know if that is useful... }); $(document).on('click', 'label[for^="ui-multiselect-selectedSku-option-"] input',function(event){ console.log("Clicked on a radio input"); event.stopImmediatePropagation(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="ui-multiselect-selectedSku-option-1"><input id="ui-multiselect-dropdown-option-1" type="radio" value="DropDownVal1"><span>DropDownText1</span></label> <label for="ui-multiselect-selectedSku-option-2"><input id="ui-multiselect-dropdown-option-2" type="radio" value="DropDownVal2"><span>DropDownText2</span></label> 

Answer 2

The first problem is your label. You generally should either have your input inside the label OR use the for attribute. Your for attributes are for different controls than the ones inside the labels. I am not sure how browsers will handle this.

If you don't want clicks on the label to trigger an input, don't associate them at all. Consider not using a label at all, use a span instead.

If there is a condition that turns on/off whether the label affects a control, you can use code to set/clear the label's for attribute.