点击事件不工作在chrome浏览器中的html选择选项标记 [英] Click event is not working on html select option tag in chrome browser

问题描述

我想在选择选项标签上触发点击事件（而不是更改事件）。选择选项标签上的点击事件仅适用于Firefox不在Google Chrome中。我花了很多时间来解决这个问题仍然不成功。
任何人都可以帮我解决这个问题。 Thanx。

解决方案

尝试编辑 onclick code>选择标记来调用选项标记的 onclick 。现在的问题是它可能在FireFox中调用两次。

  function getSelectedOption（select）{
 return select.options [select.selectedIndex]; 
} 
  

查看操作中 - >

 < 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 函数来检查浏览器是chrome ，那么我们可以覆盖我们自己！

  var is_chrome = navigator.userAgent.toLowerCase（）。indexOf（'chrome'）> -1; 
  

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

  clickSelectedOption（select）{
 if（！is_chrome）return; 
 select.options [select.selectedIndex] .click（）; 
} 
  

---

/ p>

 < 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 text（text）{document.getElementById（'display'）。innerHTML = text; } function clickSelectedOption（select）{if（！is_chrome）return; select.options [select.selectedIndex] .click（）; }< / script>  

I want to fire a click event(not change event) on select option tags. Click event on select option tag only works in firefox not in google chrome. I have spend a lot of time to resolve this issue still not successfull. Anyone can help me to resolve this problem. Thanx in advance.

解决方案

Try editing the onclick function of the select tag to call to the option tag's onclick. The problem now is that it may call twice in FireFox.

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

To see in action ->

<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>

---

Also, the problem with this is that the onclick is fired once for clicking the option and another for selecting (then firefox comes around for another). So, the best way I found to patch this is to change it to an onchange for the select tag.

But sadly that only gets rid of the initial click, not FireFox's correct way of clicking...

---

So, if we modify our getSelectedOption function to check if the browser is chrome then we can cover our selves!

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

Our new function can look like the following...

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

---

Mix everything together!

<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>

这篇关于点击事件不工作在chrome浏览器中的html选择选项标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！