<div class="content"> <div class="tab_coupon"> <div data-type="3">已过期<p></p></div> <div data-type="2">已使用<p></p></div> <div class="active" data-type="1">待使用<p></p></div> </div></div> $(function(){ $(".head-title span").click(function(){ history.go(-1); }); $(".tab_coupon > div").off('click').click(function(){ $(".tab_coupon div").removeClass("active"); $(this).addClass("active"); var type = $(this).data("type"); $(".list_coupon div").each(function(n){ $(this).hide(); if(n + 1 == type) $(this).show(); }); }); 这里的代码为什么点击事件会在div外部也可以触发，如何解决

根据您提供的代码，点击事件绑定在".tab_coupon > div"元素上，只有它的直接子元素可以触发点击事件，不会在div外部触发。因此，如果点击事件在div外部也可以触发，可能是由于其他代码或CSS样式的影响导致的。

您可以尝试使用浏览器的开发者工具来检查点击事件的目标元素和其他可能影响事件的元素和样式。另外，您可以尝试修改CSS样式，例如添加一个透明的遮罩层来防止事件冒泡到其他元素。例如：

.tab_coupon {
  position: relative; /* 父元素设置为相对定位 */
}

.tab_coupon > div {
  position: relative; /* 子元素设置为相对定位 */
}

.tab_coupon > div:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0; /* 添加透明背景层 */
}

.tab_coupon > div.active:after {
  opacity: 0.5; /* 激活状态下，背景层不透明 */
}

这样，当".tab_coupon > div"元素被点击时，背景层会捕获点击事件，防止事件冒泡到其他元素。

相关问题

<div class="content"> <div class="tab_coupon"> <div data-type="3">已过期<p></p></div> <div data-type="2">已使用<p></p></div> <div class="active" data-type="1">待使用<p></p></div> </div></div> $(function(){ $(".head-title span").click(function(){ history.go(-1); }); $(".tab_coupon > div").off('click').click(function(){ $(".tab_coupon div").removeClass("active"); $(this).addClass("active"); var type = $(this).data("type"); $(".list_coupon div").each(function(n){ $(this).hide(); if(n + 1 == type) $(this).show(); }); }); 此处代码如何修改成点击文字才会触发点击事件

您可以将点击事件绑定到div内部的文本元素上，而不是绑定到整个div元素上。例如：

<div class="tab_coupon">
  <div data-type="3"><p>已过期</p></div>
  <div data-type="2"><p>已使用</p></div>
  <div class="active" data-type="1"><p>待使用</p></div>
</div>

$(".tab_coupon > div > p").off('click').click(function(){
  $(".tab_coupon div").removeClass("active");
  $(this).parent().addClass("active");
  var type = $(this).parent().data("type");
  $(".list_coupon div").each(function(n){
    $(this).hide();
    if(n + 1 == type) $(this).show();
  });
});

这样，点击div内部的文本元素时才会触发点击事件，而不是整个div元素。

<!-- 优惠券列表 --> <div style="border:1px solid #FFF;position:relative"> <div class="couponList" v-show="couponFlag"> <el-checkbox-group v-model="checkList" @change="ChooseCouponList"> <div class="coupon-box grid" v-for="item in AccountCouponList" :key="item.id"> <div class="coupon-item-l grid flex_items grid_column flex_center"> <div style="color:#EB3434;font-size:26px;">￥<span style="font-size:56px">{{item.payDiscountValue}}</span></div> <div style="margin-top:10px;font-size:26px">满{{item.payThreshold}}可用</div> </div> <div class="coupon-item-r"> <div class="grid" style="height: 100%;"> <div class="u-2of3" style="height:100%"> <!-- <div style="font-weight:700;padding-left:40px;margin-bottom:15px">{{item.couponName}}</div> --> <div>1111111111</div> <div style="padding-left:40px;font-size:26px">有效期{{(item.expireTime).slice(0, 10)}}</div> </div> <div class="u-1of3" style="height: 100%;;text-align:center"> <!-- <el-checkbox class="custom-checkbox" :label="item.id"></el-checkbox> --> <!-- <img v-if="SelectRadio === index" src="../../assets/gouxuan_youhuiquan.png" alt="勾选"> <img v-else src="../../assets/gouxuan_youhuiquan_n.png" alt="未勾选"> --> </div> </div> </div> </div> </el-checkbox-group> </div> </div> 这段代码写法有没问题, 1111111111div容器的字段,在页面上显示不出来

根据你提供的代码，没有明显的语法错误。不过，有几个可能导致 `<div>1111111111</div>` 不显示的原因：

1. CSS 样式问题：请确保这个 `<div>` 元素的父元素或者其他相关元素没有设置了隐藏、透明度为 0、或者其他可能导致该元素不可见的 CSS 样式。

2. 数据问题：请检查 `AccountCouponList` 数组中的数据是否存在，并且确保 `item.couponName` 的值不为空。如果 `item.couponName` 是空的，那么 `<div>1111111111</div>` 中就不会显示任何内容。

3. 其他代码问题：请检查其他与该元素相关的代码，特别是可能会影响该元素显示的条件语句、指令、事件处理等。

如果以上检查都没有找到问题，你可以尝试在浏览器开发者工具中查看该元素是否存在，并检查是否有其他样式或错误信息影响了其显示。另外，你还可以尝试将该元素放置在其他位置或者与其他元素进行比较，看是否有不同的显示效果。