将 onclick 转换为 onchange答案

【问题标题】：Transforming onclick into onchange将 onclick 转换为 onchange
【发布时间】：2012-12-29 13:52:41
【问题描述】：

在过去的几天里，我一直在为我的网站创建联系表单，该表单可能是专业的并且包含 display:none/block 和 disabled:true/false 区域。我成功了。但一个小时前我被告知 Chrome 不支持“onclick”功能，所以现在我必须将所有“onlick”内容更改为“onchange”.. 但它看起来并不明显（仍然无法正常工作）......

ONCLICK 工作正常：

<script language="javascript">
    function enableField() { some function here }
    function disableField() { some function here }
</script>

<select class="list" id="topic">
    <option onclick="javascript:disableField()" selected="selected">Select Your topic</option>
    <option onclick="javascript:enableField()">Topic 1</option>
    <option onclick="javascript:enableField()">Topic 2</option>
    <option onclick="javascript:disableField()">Topic 3</option>
    <option onclick="javascript:disableField()">Topic 4</option>
</select>

ONCHANGE 不会：

<script language="javascript">
    function enableField() { some function here }
    function disableField() { some function here }
</script>

<select class="list" id="topic" onchange="javascript:this.value()">
    <option value="disableField" selected="selected">Select Your topic</option>
    <option value="enableField">Topic 1</option>
    <option value="enableField">Topic 3</option>
    <option value="disableField">Topic 3</option>
    <option value="disableField">Topic 4</option>
</select>

我只是想在“javascript:X()”中将“值”插入为“X”，这样这个函数就可以像在“ONLICK”选项中那样工作。

我一直在尝试各种不同的方法，但这些都不起作用。

请帮忙。问候，迈克

【问题讨论】：

标签： javascript forms google-chrome onclick onchange

【解决方案1】：

一种方法

<select class="list" id="topic" onchange="window[this.value]()">
    <option value="disableField" selected="selected">Select Your topic</option>
    <option value="enableField">Topic 1</option>
    <option value="enableField">Topic 3</option>
    <option value="disableField">Topic 3</option>
    <option value="disableField">Topic 4</option>
</select>

但我会这样做

<script language="javascript">
    function enableField() { some function here }
    function disableField() { some function here }
    function handle(value){
       if (value === 'enableField'){
           enableField();
       } else {
           disableField();
       }
    }
</script>

<select class="list" id="topic" onchange="handle(this.value)">
    <option value="disableField" selected="selected">Select Your topic</option>
    <option value="enableField">Topic 1</option>
    <option value="enableField">Topic 3</option>
    <option value="disableField">Topic 3</option>
    <option value="disableField">Topic 4</option>
</select>

注意：对于onclick、onchange 等事件属性，您不必说javascript:...，这是隐含的..

【讨论】：

盖比，非常感谢！我会选择第二种方式，看起来清晰易懂。谢谢！！ :))))

【解决方案2】：

this.value()

是一个字符串；你不能调用一个字符串。你想要的是在全局范围内找到函数：

window[this.value]()

另外，最好将函数存储在专用对象中：

funcs = {
  disableField: function(){...},
  enableField: function(){...},
}

...

funcs[this.value]()

【讨论】：