Javascript onChange仅在使用鼠标时发生

Javascript onChange only when using mouse

本文关键字：鼠标 onChange Javascript      更新时间：2023-09-26

我有一个Javascript函数，用于捕获选择下拉菜单的onChange。是否有可能仅在用户使用鼠标从下拉菜单中选择项目时触发事件，而不是在使用键盘向上或向下滚动时触发事件?

Have you tried this :
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>
<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>
</body>
</html>
  Trigger the handler
</div>

检查此解决方案，它忽略键盘选择，只能使用鼠标选择

<script type="text/javascript">
function IgnoreAlpha(e)
{
if (!e)
{
    e = window.event ;
}
if (e.keyCode >= 65 && e.keyCode <= 90) // A to Z
{
    e.returnValue=false;
    e.cancel = true;
}
}
</script>
<body>
<p>
    <select id="MySelect" name="MySelect" onkeydown="IgnoreAlpha(event);"">
        <option selected="selected" value="" />
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
</p>
</body>

试试这个。这是在IE工作很好，但不是在chrome。不知道为什么?使用IE调试器工具进行测试(工作正常)，也使用VS2015 (IE，在keydown上击中断点)工作，但在chrome中运行时未击中断点。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
 <script type="text/javascript">
        function IgnoreArrow(e)
        {
        if (e.keyCode == 37 || e.keyCode == 38 ||  e.keyCode ==39 || e.keyCode ==40 )
        {
            return false;
        }
        }
        function myFun() {
            var x = document.getElementById("mySelect").value;
            document.getElementById("demo").innerHTML = "You selected: " + x;
        }
</script>    
</head>
<body>    
        <p>
    <select id="mySelect" name="mySelect" onkeydown="return IgnoreArrow(event);" onchange="myFun()">
        <option selected="selected" value="" />
        <option value="Dream Theater">Dream Theater</option>
        <option value="Metallica">Metallica</option>
        <option value="Iron Maiden">Iron Maiden</option>
    </select>
</p>
<p id="demo"></p>

</body>
</html>
相关文章：