用于否定父元素中的特定 HTML 元素的 JQuery 选择器

Question

我有一个由 JQuery 多选下拉库生成的 HTML 标签结构，如图所示：

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

我的要求是：除了输入元素，每当用户点击其他任何地方

<label></label>

（包括标签）区域，我需要做event.preventDefault()。我试过了

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

但即使我点击标签内的<input> 也会触发上述处理程序（这很明显，我知道！）

我如何编写一个 JQuery 选择器来过滤它。

Answer 1

最好的办法是将输入从标签中取出...但是：

我无法控制此标记结构...（您对另一个答案的评论）

您可以在<input> 元素上使用.stopImmediatePropagation()...所以点击事件不会冒泡到标签。

见下文...尝试点击标签，然后点击收音机。

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

第一个问题是你的标签。您通常应该在标签内输入输入或使用 for 属性。您的 for 属性用于与标签内的控件不同的控件。我不确定浏览器会如何处理这个问题。

如果您不希望点击标签触发输入，则根本不要关联它们。考虑根本不使用标签，而是使用跨度。

如果有开启/关闭标签是否影响控件的条件，可以使用代码设置/清除标签的for属性。