检测与选择框的交互答案

【问题标题】：Detecting interaction with select box检测与选择框的交互
【发布时间】：2012-05-15 21:05:52
【问题描述】：

如何（使用 Javascript 或 jQuery）检测何时从选择框中选择了一个值，即使它与之前选择的选项相同（即没有触发更改事件）。

主要是我需要这个来进行鼠标交互，但也适用于键盘的解决方案会很方便。

【问题讨论】：

很有可能你正试图以错误的方式去做。请问您为什么要这种行为？就个人而言，我反对改变浏览器的行为。
@Tyler Crompton 我在一个由 Backbone 填充的表中有一些行，其中一些列包含一个选择框来显示并允许更改值。我想为用户最后一次与记录交互的时间保存一个时间戳，并且记录甚至不会导致任何更改的交互也很重要。基本上，就我的目的而言，用户评估和考虑更改值与他们实际更改值一样重要。

标签： javascript jquery forms select dom-events

【解决方案1】：

我认为 focus() 函数会帮助你..试试这个： http://api.jquery.com/focus/

【讨论】：

我想你误解了这个问题

【解决方案2】：

我发现唯一可行的解决方案是通过将select 的值设置为mousedown 上的其他值来引发change 事件。在标记中，我创建了一个额外的选项（即第一个孩子）并将其隐藏（像往常一样完美地隐藏在 Chrome/FF/Safari、IE 中）。所以看起来不错。

<select>
    <option style="display: none"></option>
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
</select>

然后使用 jQuery 我们绑定change 和mousedown 事件，当mousedown 触发时，select 将其值重置为隐藏选项的值。

$("select").on({
    change: function() {
        console.log($(this).val());
    },
    mousedown: function() {
        $(this).val($(":first", this).val());
    }
});

演示： http://jsfiddle.net/LzNrS/

更新：为了在用户点击select但决定不选择任何东西时保留所选值，我们可以修改代码添加blur事件并更新@987654334 @。

var special = ""; // special hidden option value
var value = ""; // temporary variable

$("select").on({
    change: function() {
        console.log($(this).val());
    },
    mousedown: function() {
        if (this.value == special) {
            $(this).val(value);
            return;
        }
        value = this.value;
        $(this).val(special);
    },
    blur: function() {
        if (this.value == special)
            $(this).val(value);
    }
});

演示： http://jsfiddle.net/LzNrS/1/

【讨论】：

还可以将键盘导航视为提到的 OP。干得好。
不错的解决方案。最终，由于似乎没有一个完全直接的解决方案，我决定通过在相邻标签中显示当前值并让选择更新此值然后在每次更改后重置为默认选项“请确认状态”来规避问题事件。

【解决方案3】：

如果您可以将事件处理程序附加到选择框选项元素并单击存储其值，我不知道它是否可以从我的头顶开始工作。

适用于鼠标，不适用于键盘http://jsfiddle.net/w4DEJ/4/

【讨论】：