Селектор JQuery для отрицания определенных элементов HTML внутри родительского элемента

Question

У меня есть структуры меток HTML, сгенерированные выпадающей библиотекой множественного выбора JQuery, как показано:

<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

Лучше всего было бы иметь ввод из метки ... Но:

У меня нет контроля над этой структурой разметки ... (ваш комментарий к другому ответу)

Вы можете использовать .stopImmediatePropagation() для элементов <input> ... Таким образом, событие щелчка не будет всплывать до метки.

См. Ниже... Попробуйте щелкнуть ярлык, затем на радио.

$(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 предназначены для других элементов управления, чем те, которые находятся внутри меток.Я не уверен, как браузеры справятся с этим.

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

Если есть условие, которое включает / выключает, влияет ли метка на элемент управления, вы можете использовать код для установки / сброса метки для атрибута.