Onclick 事件在 Firefox 和 IE 中触发，但在 Chrome 中不触发答案

【问题标题】：Onclick event firing in Firefox and IE but not in ChromeOnclick 事件在 Firefox 和 IE 中触发，但在 Chrome 中不触发
【发布时间】：2013-12-20 10:45:42
【问题描述】：

我有以下 javascript 函数。

<script type="text/javascript">
function showhidefields(value,formobj,epsflag,respflag) {
  //alert(epsflag);
  if (epsflag==0 && respflag==4) {
    document.getElementById("tpnr").style.position = "static";
    document.getElementById("tpnr").style.top = "0px";
    formobj.tussenPersoonNotext.disabled =false;
    formobj.email.disabled =true;                  
  }
</script>

<select name="moduleidval" class="validate['required']">
   <option value="">-- Selecteer Proces--</option>
   <option onclick="showhidefields(this.value,this.form,'<?php echo 1; ?>');" 
   value="<?php echo $epsmodules; ?>"><?php echo 'MBO'; ?></option>
</select>

我的问题是当我在firefox 或IE 的情况下单击选项时，onclick 事件会触发，但在 chrome 的情况下它根本不会触发。我尝试更改函数名称也是，但没有运气。

fiddle

提前致谢

【问题讨论】：

标签： javascript php html google-chrome

【解决方案1】：

检查您的 chrome 中是否启用了 javascript。

Select Customize and control Google Chrome to the right of the address bar

From the drop-down menu, select Settings

At the bottom of the page, click Show advanced settings…

Under Privacy, click the Content settings… button

Under the JavaScript heading, select the Allow all sites to run JavaScript radio button

【讨论】：

我在我的 chrome 浏览器中启用了 javascript

【解决方案2】：

当然，选项标签上没有click 事件。

你可以监听select标签的onchange事件。

 <!-- HTML -->
<form id='myForm' action="#">
    <select id='mySelect' name="moduleidval" class="validate['required']">
      <option value="-">-- Selecteer Proces--</option>
      <option value="MBO">MBO</option>
    </select>
</form>

// JavaScript
document.getElementById('mySelect').onchange = function(){
    alert('value:'+this.value); 
    alert('form id:' + this.form.id);
}

查看演示here

【讨论】：

将部分代码粘贴到 jsbin.com。也许你会遇到另一个问题。 @RishabhRaj
@RishabhRaj jsbin.com/iHEgaQiW/5/edit 好的，现在。将 onchange=* 移动到 select 标记中。不是选项标签。

【解决方案3】：

option 元素不会在所有浏览器中触发 click 事件，您应该远离依赖它。相反，您可以为 select 使用 onchange() 事件。你可以使用这样的东西

<html>
 <head>
  <script type="text/javascript">

   function changeFunc() {
    var selectBox = document.getElementById("selectBox");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    alert(selectedValue);
   }

  </script>
 </head>
 <body>
  <select id="selectBox" onchange="changeFunc();">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>`enter code here`
  </select>
 </body>`enter code here`
</html>

在您的情况下，您使用 like

<form id='myForm' action="#">
  <select id='mySelect' name="moduleidval" class="validate['required']" onchange="showhidefields(this.value,this.form,'0');">
   <option value="-">-- Selecteer Proces--</option>
   <option value="1"> 'Klantprocessen'</option>
</select>
</form>

【讨论】：

使用 onchange 到 select 而不是 option
感谢这种方法，为此 +1，但它仍然没有回答我的问题，即为什么我的代码不起作用但我会接受它:)
jsbin.com/iHEgaQiW/1/edit 在这里，它只是我实际代码中的一个片段。

【解决方案4】：

很少有浏览器不支持选项标签的 onclick 事件。这是reference

所以你可以去选择标签的onchange。

【讨论】：

呃...看起来这个参考是从 2007 年开始的，在那之后发生了很多变化...

【解决方案5】：

可以在指定的函数中直接传值，如：

<select onchange="trig(value);">

然后可以在trig 函数中使用此值。

function trig(val) {
    //do foo
    alert(val);
}

简短而简单。

Chrome 中的工作演示：http://jsfiddle.net/amarprabhu/9C3VU/

【讨论】：