onclick 选项标签在 IE 和 chrome 上不起作用答案

【问题标题】：onclick on option tag not working on IE and chromeonclick 选项标签在 IE 和 chrome 上不起作用
【发布时间】：2012-04-15 20:50:36
【问题描述】：

我在select 框的选项标签中使用onclick 事件

<select>
    <option onclick="check()">one</option>
    <option onclick="check()">two</option>
    <option onclick="check()">three</option>
</select>`

onclick 事件在 IE 和 Chrome 上不起作用，但在 Firefox 中运行良好，在这里，我不想在选择标签 bcz 上使用 onchange 事件，如果用户再次选择相同的选项，它不会触发事件

例如：假设用户第一次选择“one”下拉菜单我会在处理完一些内容后打开一个弹出窗口用户关闭弹出窗口，假设如果用户想要选择相同的“one”下拉菜单它不会触发任何事件。这可以解决在选项标签上使用 onclick 事件，但它不适用于 IE 和 chrome

有什么办法解决这个问题吗？

【问题讨论】：

你能给我们一个小提琴吗？
@gdoron jsfiddle.net/jq9td/11
这还不够。给我们一个完整的例子。请...
@gdoron 我尝试设置它但无法做到 bcz extjs 正在正确加载 kay-zhu 已通过问题回答它与我想要的很接近。但它现在在 Firefox 中的行为不同（请参阅我的在下面发表评论。），你能帮我解决这个问题吗？
对不起，我不想猜测，当你有工作演示时通知我。那我很乐意帮助你。

标签： html html-select

【解决方案1】：

option 标签上的onclick 事件将在大多数版本的 IE、Safari 和 Chrome 上失败：reference

如果您想在用户选择时触发事件，为什么不简单地使用：

<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>

如果你想对用户选择的特定选项做某事：

<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>

这样，如果选择选项，则可以保证您可以致电check() / p>

编辑：正如@user422543 在 cmets 中指出的那样，此解决方案在 Firefox 中不起作用。因此我在这里问了另一个问题：Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

到目前为止，使用<select> 标记似乎无法在所有浏览器中始终如一地工作。但是，如果我们使用诸如jQuery UI select menu 或Chosen 之类的库来模拟选择菜单来创建选择菜单而不是使用<select> 标签，则click 事件将在<ul> 或<li> 标签上触发，即在我测试的所有浏览器中保持一致。

【讨论】：

不显眼的 JavaScript 会是更好的解决方案。
@Kay Zhu 在 chrome 和 IE 中一切正常，但在 Firefox 中，甚至在选择下拉值之前它正在触发该功能，您对此有什么建议。检查此链接jsfiddle.net/jq9td/31 试试看chrome和firefox你会知道区别的。
@kay-zhu 在 chrome 和 IE 中一切正常，但在 Firefox 中，即使在选择下拉值之前它正在触发该功能，您对此有何建议。检查此链接jsfiddle.net/jq9td/31 试试看在 chrome 和 firefox 中你会知道它们的区别。
@user422543 是的，我没想到 Firefox 会这样。我尝试了各种方法来解决它，但似乎根本问题是 Firefox 对待“选择”上的“点击”事件与 Webkit/IE 不同。我在这里问了一个问题：stackoverflow.com/questions/10119793/…
Chrome 和 Firefox 处理点击事件的方式不同。在 chrome 和 firefox 中试试这个 jsfiddle jsfiddle.net/d1jb4qer/1

【解决方案2】：

我还有一个建议，不是100%，而是差不多：

<select onchange="valueChanged(this.value); this.selectedindex = -1">
    <option style="display: none"></option>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
</select>

这样，即使用户选择了两次相同的选项，事件也会被触发。问题是 IE 将显示空选项（它忽略样式属性），但单击它不会触发事件，因为它总是以被选中的方式开始，因此选择它不会触发 onchange...

【讨论】：

【解决方案3】：

这会通过记录点击次数来模拟您的options 上的onclick 事件。

http://jsfiddle.net/yT6Y5/1/

第一次点击被忽略（用于展开下拉菜单），
第二次点击实际上是您的“选择”。（然后点击计数被重置）。

虽然它不适合键盘交互....

哦，我正在使用 JQuery，但你可以使用纯 JS 重新做

【讨论】：

感谢您的回复，它没有按预期工作例如：单击“两个”两次它只会给您一个警报。无论如何它非常脆弱，我们不能使用这个逻辑。
“点击‘二’两次只会弹出一个”是什么意思？ JSFiddle 中的代码将在选择选项时触发事件，无论所选索引是否已更改。它几乎不脆。
这里我的意思是“无论选择的索引是否已更改，选择选项时它都不会触发事件”。在 chrome 中尝试，当您第一次单击时它不会触发事件下拉列表是正确的，但是当您选择任何下拉列表时，它应该触发一个没有发生的事件。看到这个像jsfiddle.net/jq9td/31它是这样工作的。

【解决方案4】：

你只需要

把脚本放在select上面，
设置onclick和onblur进行选择，如代码所示
并自定义检查功能。

我已经测试过了，它可以工作:)。

<script>
    selectHandler = {
        clickCount : 0,
        action : function(select)
        {
            selectHandler.clickCount++;
            if(selectHandler.clickCount%2 == 0)
            {
                selectedValue = select.options[select.selectedIndex].value;
                selectHandler.check(selectedValue);
            }
        },
        blur : function() // needed for proper behaviour
        {
            if(selectHandler.clickCount%2 != 0)
            {
                selectHandler.clickCount--;
            }
        },
        check : function(value)
        {
            // you can customize this
            alert('Changed! -> ' + value);
        }
    }

</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
    <option value="value-1"> 1 </option>
    <option value="value-2"> 2 </option>
    <option value="value-3"> 3 </option>
    <option value="value-4"> 4 </option>
</select>

【讨论】：

嗨，感谢您的回复，它在 Firefox 中工作正常，但在 chrome 中却没有，当用户第一次单击并选择下拉值时，它不会触发事件。检查此链接jsfiddle.net/yT6Y5/14

【解决方案5】：

在选择标签的 id 中使用 function(this)

例如

<script type="application/javascript">

var timesSelectClicked = 0;

$(function() {
    $(document).on('click keypress', 'select', function (e) {
        if (timesSelectClicked == 0)
        {
            timesSelectClicked += 1;
        }
        else if (timesSelectClicked == 1)
        {
            timesSelectClicked = 0;
            prompt($('select option:selected').text());
        }
    });
});
</script>

【讨论】：

【解决方案6】：

此代码无法在 Google Chrome 中运行，但在 Mozilla 中运行。

<select>
    <option value="2" (click)="myFunction($event)">
     <div>2</div>
    </option>

    <option value="5" (click)="myFunction($event)">
     <div>5</div>
    </option>

   <option value="10" (click)="myFunction($event)">
    <div>10</div>
  </option>

</select>

此解决方案适用于 Chrome 和 Mozilla。我没有在 Safari 中测试。;

<select (change)="myFunction($event)">
    <option value="2">
     <div>2</div>
    </option>

    <option value="5">
     <div>5</div>
    </option>

   <option value="10">
    <div>10</div>
  </option>

</select>

【讨论】：

(click)="fonction" 是什么语法？那是一种预处理语言吗？据我所知，我不能在任何浏览器中本地工作。

【解决方案7】：

这适用于不同的浏览器 CHROME、FIREFOX、IE、AVAST BROWSER、BRAVE 等......并且用户可以尽可能多次地更改选项，而事件仍然会一遍又一遍地发生。

HTML:
<select id="howtopay">
    <option selected>Select</option>
    <option value="1">ATM - PAYSTACK (Instant Funding)</option>
    <option value="2">BANK DEPOSIT/TRANSFER</option>
</select>

JQUERY:
$(function(){
    $('#howtopay').change(function() {
        if ($(this).val() == "1") {
        $('#fund_with_atm').show();
        $('#fund_with_bank').hide();
      } 
        else if ($(this).val() == "2") {
        //Do Nothing
      }
      else {
        //Do Nothing
      }
    }); 
});

【讨论】：

为什么你有 2 个函数而不是 if ($(this).val() == "1"){...}else if ($(this).val() == "2"){？
那是真的...我实际上不记得了。只是在尝试一种适用于所有浏览器的解决方案。

【解决方案8】：

如果您只想在用户单击选项时触发 onclick 事件，请使用 event.detail:

<select onclick="selectFunc(this.children[this.selectedIndex])">

在你的函数定义中：

function selectFunc(option){
  //event.detail = 0 on option click across firefox, chrome, opera, edge
  if(!event.detail){
    //your code
  }
}

【讨论】：

更正 - 它实际上在 Firefox 中不起作用。但我觉得它以前对我有用。

【解决方案9】：

我为那些想知道的人找到了一个很好的解决方法。

html:

             <select id="n1" onclick="n1c()">
                    <option id="h" value=undefined disabled selected hidden>Header</option>
                    <option id="o1" value="v1">one</option>
                    <option id="o2" value="v2">two</option>
                    <option id="o3" value="v3">three</option>
                </select>

js:

    function n1c() {
        if (n1.value != undefined) {
            if (n1.value == "v1"){
                check1()
            }   else if (n1.value == "v2") {
                check2()
            }   else if (n1.value == "v3") {
                check3()
            }   
        }
    }

这允许您运行针对您所选择的内容量身定制的特定目标 javascript 函数。它在您选择框和进行选择时运行。使用下面的代码，您可以修复/更改它以适合您的项目。

var opt = undefined
function check1() {
    if (opt == "opt1") {
        console.log("already selected")
    }   else {
        opt = "opt1";
        <-- place code here -->
    }
}

这和我所拥有的差不多。它适用于 chrome/edge/safari 选择功能和 firefox/ie 选择功能。可能有一种方法可以压缩/优化此代码，但它至少可以完成工作。

【讨论】：

【解决方案10】：

我发现以下内容对我有用 - 而不是在点击时使用，在更改时使用，例如：

jQuery('#element select').on('change',  (function() {

   //your code here

}));

【讨论】：