如何使父标签和子标签在b-form-checkbox上具有onclick而不重复

Posted 2023-02-16

【中文标题】如何使父标签和子标签在b-form-checkbox上具有onclick而不重复

【英文标题】：How to make parent tag and child tag have onclick without repetition on a b-form-checkbox

【发布时间】：2021-09-14 03:09:33

【问题描述】：

我有一个带有一些不同子标签的 li 标签，其中还包括一个 b-form-checkbox。当我单击li 标签上的任意位置时，我希望复选框能够正常工作，并且该复选框也包含在复选框中。 当我单击li 中的任何位置时，它工作正常，但是当我单击b-form-checkbox 时，onclick 事件被调用 2 次，复选框只需单击一次即可选中并取消选中。我尝试了很多方法，例如.self，但随后v-on:click b-form-checkbox 不起作用。

li 标记代码如下，包括它们所在的 b-form-checkbox 和 template 标记。

<template v-for="(product, index) in products">
          <div
            class="col-12 col-md-6"
            :key="product.id"
            v-if="!product.responded"
          >
            <li
              class="products-search__list-item"
              v-on:click.self="toggleProduct(index)"
            >
              <div v-on:click.self="toggleProduct(index)" class="products-search__image">
                <img :src="product.img"  />
              </div>
              <div v-on:click.self="toggleProduct(index)" class="products-search__details">
                <span> product.amount x  product.name </span>
                <span v-if="$func.regionCheckGLobal()"
                  >$  product.unitPrice  / unit</span
                >
                <span v-else>PKR  product.unitPrice  / unit</span>
              </div>
              <div v-on:click.self="toggleProduct(index)" class="products-search__check-box" >
                <b-form-checkbox v-on:click.self="toggleProduct(index)"  v-model="product.checked" > </b-form-checkbox>
              </div>
            </li>
          </div>
        </template>

data() 在下面的脚本部分相关变量中

 return    
      products: [],

    ;

methods:vue 脚本部分中与onclick相关的代码

 toggleProduct(index) 
   this.products[index].checked = !this.products[index].checked;

【问题讨论】：

您是否尝试过从 b-form-checkbox 中删除 v-on:click.self="toggleProduct(index)"，考虑到您有这么多的点击处理程序。调用相同的函数，它们会重叠是不可避免的，只需尝试最外层组件上的点击处理程序，如 ，应该可以防止调用重复！

@Komi 是的。我有。正如我所说，没有任何 onclick 和 .self。我努力了。我只在li 标签中添加了v-on:click="toggleProduct(index)"，并删除了所有其他点击事件监听器。然后它在所有 li 上都可以正常工作，除非我直接单击 b-form-checkbox 它会立即检查并取消选中，我认为这是两次单击事件。换句话说，导致重复。

【参考方案1】：

<template>
  <div class="container">
    <div v-for="(product, index) in products" :key="index">
      <div class="col-12 col-md-6" :key="product.id" v-if="!product.responded">
        <li class="products-search__list-item" @click="toggleProduct(index)">
          <div class="products-search__image">
            <img :src="product.img"  />
          </div>
          <div class="products-search__details">
            <span> product.amount x  product.name </span>
            <span>$  product.unitPrice  / unit</span>
          </div>
          <div class="products-search__check-box">
            <b-form-checkbox v-model="product.checked" />
          </div>
        </li>
      </div>
    </div>
  </div>
</template>

这就是我修改模板的方式，而不是输入类型复选框，您可以使用 b-form-checkbox，它的行为方式应该与我示例中的输入相同。 这是Code Sandbox 链接到我所做的工作，我相信这是你需要的，现在我将更详细地解释：

由于您在li 的所有子组件上都有所有这些click 侦听器，因此您点击的区域有点击侦听器，例如checkbox 和div checkbox在并且div 带有复选框的 div 在单击事件中冒泡到最外面的组件，在这种情况下，您可以在最外面的组件上放置一个单击侦听器，您要使用我们的每个子组件触发操作（不要嵌套请处理程序）您希望触发点击。

总之不要做嵌套事件监听器！

希望对您有所帮助！

更新：再次检查您的代码以了解我的代码与您的代码之间的差异，为您添加bootstrap-vue，并在codesandbox example 中使用b-form-checkbox！这可以按您的意愿工作：D

【讨论】：

你用 b-form-checkbox 试过了吗？ .我的意思是这个可以工作，但它可以与 b-form-checkbox 一起工作吗？因为我甚至在尝试单击嵌套或.self

之前都尝试过完全相同的方法

我尝试添加 b-form-checkbox 并遇到同样的问题。我拥有的那个..我的意思是你的方法肯定有效，但不适用于 b-form-checkbox，但感谢您的努力..感谢它。

@MuhammadUmarKhan 更新了我的答案，请查看：D

这正是我在.self 之前所做的，但它对你有用，但对我没有用。我想也许我在 main.js 中使用引导插件的方式可能导致了这个问题。我试过了，在我做了 v-on:click.stop.prevent="toggleProduct(index)" 它在我的设置中对我有用，但你的方法没有。可能是因为您从某个 .esm 文件中导入引导程序，而我正在使用 Bundle 添加插件的方法。无论如何，你的答案也是正确的，因为它也有效。

【参考方案2】：

上面的答案也是正确的，但在我的情况下并不完美，可能是因为我使用引导插件的方式存在一些问题，但无论如何。 我在存在b-form-checkbox 的直接父div 上使用了v-on:click.stop.prevent="toggleProduct(index)"，并删除了除li 和checkbox 之外的所有click 事件侦听器，它对我有用。

点击监听器的li如下所示。

<li  class="products-search__list-item"
     v-on:click="toggleProduct(index)
>

b-form-checkbox 点击监听如下图

<div v-on:click.stop.prevent="toggleProduct(index)"  class="products-search__check-box" >
                <b-form-checkbox   v-model="product.checked" > </b-form-checkbox>
              </div>