Question

我想在选择选项标签上触发点击事件（不是更改事件）。选择选项标签上的点击事件仅适用于Firefox浏览器而非谷歌浏览器。我花了很多时间来解决这个问题仍然没有成功。任何人都可以帮我解决这个问题。提前完成。

Answer 1

尝试修改onclick标记的select功能，以呼叫option代码onclick。现在的问题是它可能会在FireFox中调用两次。

function getSelectedOption(select) {
    return select.options[select.selectedIndex];
}

要查看实际操作 - ＆gt;

<select onclick='getSelectedOption(this).click()'>
  <option onclick='log("foo")' >foo</option>
  <option onclick='log("bar")' >bar</option>
</select>

<p id="display"></p>

<script> 
function log(text) {
  document.getElementById('display').innerHTML = text;
}

function getSelectedOption(select) {
   return select.options[select.selectedIndex];
}
</script>

此外，问题在于，onclick会因为单击该选项而触发一次而另一次用于选择（然后firefox出现在另一个选项中）。因此，我发现修补此问题的最佳方法是将其更改为onchange标记的select。

但遗憾的是，只有摆脱了初始点击，而不是FireFox的正确点击方式......

因此，如果我们修改我们的getSelectedOption函数来检查browser is chrome是否可以覆盖我们自己！

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

我们的新功能可能如下所示......

clickSelectedOption(select) {
    if(!is_chrome) return;
    select.options[select.selectedIndex].click();
}

将所有东西混合在一起！

＆＃13;

<select onchange='clickSelectedOption(this)'>
 <option onclick='log("foo")' >foo</option>
 <option onclick='log("bar")' >bar</option>
</select>

<p id="display"></p>

<script>
  var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
         
  function log(text) {
    document.getElementById('display').innerHTML = text;
  }

  function clickSelectedOption(select) {
    if(!is_chrome) return;
       select.options[select.selectedIndex].click();
  }
</script>

＆＃13;

点击事件不适用于Chrome浏览器中的html选择选项标记

1 个答案: