Question

我在这里尝试了几种可用的解决方案。我已经在JS中添加了这些代码作为注释。我的代码，请查看。我正在努力实现：当我点击“更多信息”时，不应选中该复选框。其他人都很好。

$('.is-monogram label').on('click', function(e) {
  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert('clicked the foobar');
});



/*  $(".is-monogram label").on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
 });  */

/* var a = $('.is-monogram .option');
a.on('click', function(e) {
  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert( 'clicked the foobar' );
}); 


a.on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
}); */

.main-wrapper {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="is-monogram">
  <div class="testing">
    <div class="testing-one">
      <input type="checkbox" id="id_one" name="name_one" value="1" class="class_one">

      <label class="option" for="id_one">Lorem Ipsum Lorem
 <span class="parent-span">
  <span class="parent-child-span">more info</span>
  </span> 
  </label>

    </div>
  </div>
</div>


<div class="main-wrapper">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut
  libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis
  ac lectus.
</div>

Answer 1

您已经在处理用户用您的span支票点击if (e.target !== this)的情况。

只需在其中添加e.preventDefault()即可。

  if (e.target !== this){
    e.preventDefault();
    return;
  }

编辑后的代码段

$('.is-monogram label').on('click', function(e) {
  if (e.target !== this){
    e.preventDefault();
    return;
    }
  $('.main-wrapper').slideToggle('slow');
});





/*  $(".is-monogram label").on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
 });  */

/* var a = $('.is-monogram .option');
a.on('click', function(e) {
  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert( 'clicked the foobar' );
}); 


a.on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
}); */

.main-wrapper {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="is-monogram">
  <div class="testing">
    <div class="testing-one">
      <input type="checkbox" id="id_one" name="name_one" value="1" class="class_one">

      <label class="option" for="id_one">Lorem Ipsum Lorem
 <span class="parent-span">
  <span class="parent-child-span">more info</span>
  </span> 
  </label>

    </div>
  </div>
</div>


<div class="main-wrapper">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut
  libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis
  ac lectus.
</div>

Answer 2

您最可能在这里寻找的是preventDefault，..

因此，我们可以做的是检查单击的实际元素是否具有类parent-child-span，如果确实存在，则我们将阻止默认操作，该操作将导致复选框被触发。

因此，将以下内容作为第一行即可。

if(e.target.classList.contains("parent-child-span")) return e.preventDefault();

例如。

$('.is-monogram label').on('click', function(e) {
  //add this line below.
  if(e.target.classList.contains("parent-child-span")) 
    return e.preventDefault();

  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert('clicked the foobar');
});



/*  $(".is-monogram label").on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
 });  */

/* var a = $('.is-monogram .option');
a.on('click', function(e) {
  if (e.target !== this)
    return;
  $('.main-wrapper').slideDown('slow');
  alert( 'clicked the foobar' );
}); 


a.on("click", function(event){
  event.stopPropagation();
  alert( "I was clicked, but my parent will not be." );
}); */

.main-wrapper {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="is-monogram">
  <div class="testing">
    <div class="testing-one">
      <input type="checkbox" id="id_one" name="name_one" value="1" class="class_one">

      <label class="option" for="id_one">Lorem Ipsum Lorem
 <span class="parent-span">
  <span class="parent-child-span">more info</span>
  </span> 
  </label>

    </div>
  </div>
</div>


<div class="main-wrapper">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut
  libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis
  ac lectus.
</div>

点击不应该对孩子起作用

2 个答案: