在html-select中选择选项后如何避免onclick再次工作？

Question

下面的代码有问题；

function check(x){
  //do staff here
}

<select onclick="check(this)" class="form-control">
  <option value="value1">1</option>
  <option value="value2">2</option>
</select>

<select onclick="check(this)" class="form-control">
  <option value="value1">1</option>
  <option value="value2">2</option>
</select>

当我单击选择标签时，我的功能可以工作，但在选择一个选项后，该功能会再次工作。 但是我希望该功能仅在我单击选择标签时才起作用，而不是在再次选择选项标签之一时起作用。 我搜索但找不到任何解决方案。我怎样才能避免这种情况发生？

提前致谢。

Answer 1

使用onchange 而不是onclick。

https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event

<select onchange="check(this.value)" class="form-control">
  <option value="value1">1</option>
  <option value="value2">2</option>
</select>

Answer 2

在第一次执行时设置flag 并检查标志。

var executed = {};
function check(e) {
  var name = e.name;
  if (!executed[e.name]) {
    executed[e.name] = true;
    console.log("executed", e.name);
  }
}

<select name="select1" onclick="check(this)" class="form-control">
  <option value="value1">1</option>
  <option value="value2">2</option>
</select>

<select name="select2" onclick="check(this)" class="form-control">
  <option value="value1">1</option>
  <option value="value2">2</option>
</select>

Answer 3

如果您使用的是 jQuery，则可以使用 one() 函数，因为它记录在 here

$( "select" ).one('change', function(){
    //do staff here
}

---

<select class="form-control">
    <option value="value1">1</option>
    <option value="value2">2</option>
</select>

<select class="form-control">
    <option value="value1">1</option>
    <option value="value2">2</option>
</select>

Answer 4

让我们检查一下 event.stopPropagation() 方法。