Firefox：由 HTML 选择/选项触发的不需要的点击事件

Question

我有一个select 元素和options 可供选择。选择option 会触发回调（在我的实际项目中，它是一个在页面上创建新元素并使用ajax 调用将内容加载到其中的函数）。我可以在 Firefox 中通过select 的change 事件处理程序或options'click 事件处理程序（请参阅下面的代码）来完成。当您只选择一个选项并单击它时，这一切都可以完美运行。

当您通过在select 外部单击离开时，问题就开始了。例如，如果您通过单击打开下拉列表，然后使用键盘上的箭头逐步浏览一些 options，然后在 select 之外单击会生成 select.change（很好）和 option.click事件（这不太好，因为没有人点击option）。我仍然可以接受（虽然那个手势意味着放弃元素而不是选择一个选项），但是当你真正点击也会触发事件的东西时（在现实生活中，例如，在页面上创建或销毁元素） ，它会产生混乱。

说到下面的示例代码，我想要实现的是，通过 一个 单击，div 或 option 成为 clicked，而不是两者。 （我不关心select.change。）

我已尝试捕获和解除绑定select 的blur 和focusout 事件，但无济于事。

当用户简单地放弃 select 时，如何防止 Firefox 触发 option.click？

打开选择，使用键盘上的箭头移动，然后单击 div（“单击此 div”）在 JS 控制台上产生以下输出：

select was changed
option1 was clicked
div was clicked

我使用的是 Firefox 50.1。 jQuery 1.4.2 由我要使用的门户提供。

代码：

$('.myDiv')
    .click( function (e) {
        console.log('div was clicked');
        return false;
    })
;
$('.mySelect')
    .change( function (e) {
        console.log('select was changed');
        return false;
    })
;
$('.mySelect option')
    .click( function (e) {
        console.log($(this).val() + ' was clicked');
        return false;
    })
;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class='myDiv'>click on this div</div>
<select class='mySelect'>
<option disabled='disabled' selected='selected'>Please select an option</option>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>

Answer 1

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