Javascript 未单击选项时，更改在选择标记上激发的事件

我将更改事件绑定到select标记。select标记中的第一个选项被禁用，因为我将其用作菜单的默认文本。如果用户单击选择标记，将鼠标悬停在某个选项上而不选择该选项，然后在选择菜单外单击两次，则会触发更改事件。如何防止触发此更改事件

HTML

<select id="select">
    <option disabled="disabled" selected="selected">Title</option>
    <optgroup label="things">
        <option>cars</option>
        <option>boats</option>
        <option>world</option>
    </optgroup>
</select>

代码只是我的问题的一个示例。我添加了按钮，因为在我的真实代码中，当用户在选择菜单外单击时，我隐藏了选择菜单

下面是一个包含上述代码的示例

编辑

---

在查看评论之后，它看起来是一个firefox特有的问题，因为它在InternetExplorer、Chorme和Safari中运行良好

您始终可以将select上的一些数据与当前值关联起来，并验证它是否确实发生了更改

$('#hide').click(function(){
    $('#select').hide();
});
$('#show').click(function(){
    $('#select').show();
});
$('#select').data('currVal', 'Title');
$('#select').change(function(){
    if($(this).val() != $(this).data('currVal') {
        // this is actual value change
        alert($(this).val());
        $(this).data('currVal', $(this).val());
    }
});

我已经更新了原来的fiddle with解决方案：

---

我不理解你声称的那种行为。当我单击两次时，它不会按预期执行任何操作。我无法再现您描述的问题。请尝试将鼠标悬停在船上，然后单击“隐藏”按钮两次。您是希望防止错误更改，还是只关心默认值为当前值但在更改事件中保持不变时的错误更改？我希望为防止错误更改更新我回答中的链接谢谢你的帮助Mike，我将更改代码以侦听选项上的单击事件，而不是更改事件以避免此问题。您的代码确实帮助我实现了另一个问题的解决方案。

$('#hide').click(function(){
    $('#select').hide();
});
$('#show').click(function(){
    $('#select').show();
});
$('#select').data('currVal', 'Title');
$('#select').change(function(){
    if($(this).val() != $(this).data('currVal') {
        // this is actual value change
        alert($(this).val());
        $(this).data('currVal', $(this).val());
    }
});