在 html-select 中 selecting 选项后，如何避免 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>

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

提前致谢。

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() 方法。

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

How to avoid onclick to work again after selecting option in html-select?

javascript

html-select

onclick