Bootstrap4：复选框和标签单击事件

Question

我使用 Bootstrap 来设计我的表单。有一个复选框和一个关联的标签。我的目标是通过单击复选框来更改复选框的值，并能够通过单击标签来编辑标签的文本。 我现在的问题是，无论我单击哪个元素，无论是标签还是复选框，总是调用相同的事件。但是，我想将这些事件分开。

我已经尝试过使用不同的事件处理程序，并且还删除了 for 属性。 我认为类“custom-control-input”和“custom-control-label”阻碍了我。但我想保留造型。

谁能告诉我我还能尝试什么？我不想仅仅因为这个用例就编写新样式并维护它们。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap-reboot.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap-grid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>


<script>
  $(function() {
    $('.examples label').on('click', function(e) {
      debugger;
      console.log('Listener: Label Clicked');
    });
    $('.examples input').on('click', function(e) {
      console.log('Listener: CheckBox Clicked');
    });
  });

  function onClickLabel(e, label) {
    console.log('Label Clicked')
  }

  function onClickCheckBox(e, cb) {
    console.log('CheckBox Clicked')
  }
</script>

<div class="examples">


  <div class="mb-3">
    <h3>Does work, but ugly</h3>
    <div>
      <input type="checkbox" class="" onClick="onClickCheckBox(event, this)">
      <label class="" onClick="onClickLabel(event, this)">Check this custom checkbox</label>
    </div>
  </div>  

  <div class="mb-3">
    <h3>Always triggers the checkbox</h3>
    <div>
      <input id="cb1" type="checkbox" class="" onClick="onClickCheckBox(event, this)">
      <label for="cb1" class="" onClick="onClickLabel(event, this)">Check this custom checkbox</label>
    </div>
  </div>

  <div class="mb-3">
    <h3>Triggers everything</h3>
    <div class="custom-control custom-checkbox">
      <input id="cb0" type="checkbox" class="custom-control-input" onClick="onClickCheckBox(event, this)">
      <label for="cb0" class="custom-control-label" onClick="onClickLabel(event, this)">Check this custom checkbox</label>
    </div>
  </div>

  <div class="mb-3">
    <h3>Always triggers the label</h3>
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" onClick="onClickCheckBox(event, this)">
      <label class="custom-control-label" onClick="onClickLabel(event, this)">Check this custom checkbox</label>
    </div>
  </div>
</div>

Answer 1

您可以防止标签默认和传播，然后使用“for”属性或带有选择器的自定义数据属性触发点击。例子：

$(function() {
  $('.examples .editable-label').on('click', handleLabelClick);
  $('.examples .input[type="checkbox"].custom-control-input').on('click', handleCheckboxClick);
});

function handleLabelClick(event) {
  event.stopPropagation();
  event.stopImmediatePropagation();
  event.preventDefault();
  this.focus();
  const forMe = '#' + $(this).attr("for");
  const target = $(this).data("target") && $(this).data("target").length ? $(this).data("target") : forMe;
  $(target).trigger('click');
}

function handleCheckboxClick(event) {
  console.log('CheckBox Clicked');
}

.editable-label {
  border: solid 1px #00FF00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap-reboot.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap-grid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>

<div class="examples">
  <div class="mb-3 custom-control custom-checkbox">
    <h3>Does work, but ugly</h3>
    <div>
      <input type="checkbox" class="custom-control-input" name="ugly" id="ugly" />
      <label class="editable-label custom-control-label" for="ugly" contenteditable="true">Check this custom checkbox</label>
    </div>
  </div>

  <div class="mb-3">
    <h3>Always triggers the checkbox</h3>
    <div class="custom-control custom-checkbox">
      <input id="cb1" type="checkbox" class="custom-control-input" />
      <label for="cb1" class="editable-label custom-control-label" contenteditable="true">Check this custom checkbox</label>
    </div>
  </div>

  <div class="mb-3">
    <h3>Triggers everything</h3>
    <div class="custom-control custom-checkbox">
      <input id="cb0" type="checkbox" class="custom-control-input" />
      <label for="cb0" class="custom-control-label editable-label" contenteditable="true" data-target="#cb0">Check this custom checkbox</label>
    </div>
  </div>

  <div class="mb-3">
    <h3>Always triggers the label</h3>
    <div class="custom-control custom-checkbox">
      <input id="checkbox-3" type="checkbox" class="custom-control-input" />
      <label class="custom-control-label editable-label" contenteditable="true" data-target="#checkbox-3">Check this custom checkbox</label>
    </div>
  </div>
</div>

Answer 2

通过定义 'onClick="onClickLabel(event, this)"' 您正在创建一个事件，同时您也在 html 中创建该事件。尝试删除 onClick

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap-reboot.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap-grid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>


<script>
  $(function() {
    $('.examples label').on('click', function(e) {
      debugger;
      console.log('Listener: Label Clicked');
    });
    $('.examples input').on('click', function(e) {
      console.log('Listener: CheckBox Clicked');
    });
  });

  function onClickLabel(e, label) {
    console.log('Label Clicked')
  }

  function onClickCheckBox(e, cb) {
    console.log('CheckBox Clicked')
  }
</script>

<div class="examples">


  <div class="mb-3">
    <h3>Does work, but ugly</h3>
    <div>
      <input type="checkbox" class="" onClick="onClickCheckBox(event, this)">
      <label class="">Check this custom checkbox</label>
    </div>
  </div>  

  <div class="mb-3">
    <h3>Always triggers the checkbox</h3>
    <div>
      <input id="cb1" type="checkbox" class="" onClick="onClickCheckBox(event, this)">
      <label for="cb1" class="">Check this custom checkbox</label>
    </div>
  </div>

  <div class="mb-3">
    <h3>Triggers everything</h3>
    <div class="custom-control custom-checkbox">
      <input id="cb0" type="checkbox" class="custom-control-input">
      <label for="cb0" class="custom-control-label">Check this custom checkbox</label>
    </div>
  </div>

  <div class="mb-3">
    <h3>Always triggers the label</h3>
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" onClick="onClickCheckBox(event, this)">
      <label class="custom-control-label">Check this custom checkbox</label>
    </div>
  </div>
</div>