延迟点击事件

Question

每当我使用on（click）事件时，仅在访问另一个元素时才注册该点击。

 $(".extensions").hide(); $('.outputs').on("touchstart click", function(e) { var analogueOutputsVar = $("#AOUTP").val(); var onOffOutputsVar = $("#OOOUTP").val(); var cboxVar = $("#BOX"); var sumVar = parseFloat(analogueOutputsVar) + parseFloat(onOffOutputsVar); if (sumVar > 8 || cboxVar.is(':checked')) { $(".extensions").show() } else { $(".extensions").hide() } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex: 1 0 auto; } .footer { flex-shrink: 0; justify-content:center; } * { box-sizing: border-box; } * { box-sizing: border-box; } /* Create two equal columns that floats next to each other */ .column { float: left; width: 50%; padding: 10px; height: 30px; /* Should be removed. Only for demonstration */ } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } input[type=number]{ width: 120px; } </style> <div class="outputs"> <div class="row"> <div class="column"> ON/OFF Outputs </div> <div class="column"> <input type="number" name="OOOUTP" id="OOOUTP" min="0" step="1" max="28" value="0"> </div> </div> <div class="row"> <div class="column"> Analogue Outputs </div> <div class="column"> <input type="number" name="AOUTP" id="AOUTP" min="0" step="1" max="16" value="0"> </div> </div> </div> <!----> <div class="row"> <div class="column"> BOXTEST </div> <div class="column"> <input class="single-checkbox" type="checkbox" id="BOX" name="COM" value="BOX"> </div> </div> <!----> <br /> <div class="extensions"> <legend>What feedback extensions do you need?</legend> <div class="row"> <div class="column"> TEST1 </div> <div class="column"> <input class="fb" type="number" name="TEST1" min="0" step="1" value="0"> </div> </div> <!----> <div class="row"> <div class="column"> TEST2 </div> <div class="column"> <input class="fb" type="number" name="TEST2" min="0" step="1" value="0"> </div> </div> <!----> <div class="row"> <div class="column"> TEST3 </div> <div class="column"> <input class="fb" type="number" name="TEST3" min="0" step="1" value="0"> </div> </div> </div> 

https://jsfiddle.net/Colar/89g0onc2/5/ ，或者上面的代码段显示了我正在谈论的确切问题。 这个想法是，只要两个数字输入的总和大于8，就会出现其他选项。 每当我单击复选框时，这些选项也应该出现。 但是，每当我移回数字输入时，似乎仅会单击复选框。

JQUery是否有一种方法可以识别单击复选框的单击，而不必后退？ 我想确保人们在未查看选项的情况下不要单击“ 下一步”按钮。

Answer 1

这样呢？

Java脚本

$(".extensions").hide();
$('.outputs').on("click", function(e) {
    var analogueOutputsVar = $("#AOUTP").val();
    var onOffOutputsVar = $("#OOOUTP").val();
    var cboxVar = $("#BOX");
    var sumVar = parseFloat(analogueOutputsVar) + parseFloat(onOffOutputsVar);

    if (sumVar > 8 || cboxVar.is(':checked')) {
        $(".extensions").show()
    } else {
        $(".extensions").hide()
    }
});

的HTML

<style>
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
  justify-content:center;
}

* {
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 30px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

input[type=number]{
    width: 120px;
}
</style>
<div>
  <div class="row">
    <div class="column">
      ON/OFF Outputs
    </div>
    <div class="column">
      <input class="outputs" type="number" name="OOOUTP" id="OOOUTP" min="0" step="1" max="28" value="0">
    </div>
  </div>
  <div class="row">
    <div class="column">
      Analogue Outputs
    </div>
    <div class="column">
      <input class="outputs" type="number" name="AOUTP" id="AOUTP" min="0" step="1" max="16" value="0">
    </div>
  </div>
</div>
<!---->
<div class="row">
  <div class="column">
    BOXTEST
  </div>
  <div class="column">
    <input class="outputs" class="single-checkbox" type="checkbox" id="BOX" name="COM" value="BOX">
  </div>
</div>
<!---->
<br />
<div class="extensions">
  <legend>What feedback extensions do you need?</legend>
  <div class="row">
    <div class="column">
      TEST1
    </div>
    <div class="column">
      <input class="fb" type="number" name="TEST1" min="0" step="1" value="0">
    </div>
  </div>
  <!---->
  <div class="row">
    <div class="column">
      TEST2
    </div>
    <div class="column">
      <input class="fb" type="number" name="TEST2" min="0" step="1" value="0">
    </div>
  </div>
  <!---->
  <div class="row">
    <div class="column">
      TEST3
    </div>
    <div class="column">
      <input class="fb" type="number" name="TEST3" min="0" step="1" value="0">
    </div>
  </div>
</div>

说明：

我从div中删除了类outputs ，并将其添加到了input字段中，还从选择器中删除了touchstart事件。