html中Select元素的事件順序

Question

到目前為止，我只在Chrome瀏覽器中對此進

我在下面定義了html select元素：

HTML

<select class="ddl" size="5">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>

我有以下腳本：

Javascript + jQuery

$(document).ready( function () {
    $('.ddl').change( function () { alert('ddl changed'); });
    $('.ddl').click( function () { alert('ddl clicked'); });
});

在瀏覽器中， - 如果您快速單擊列表框中的項目，您將看到事件的順序從change開始，然后click 。 - 如果你按住鼠標10秒鍾然后松開它（長按）， click火焰然后change 。

的jsfiddle

我將代碼更改為以下腳本（添加mouseup事件），

Javascript + jQuery

$(document).ready( function () {
    $('.ddl').change( function () { alert('ddl changed'); });
    $('.ddl').click( function () { alert('ddl clicked'); });
    $('.ddl').mouseup( function () { alert('ddl mouseup'); });
});

我得到mouseup ， change ，然后click點擊的速度無關。 的jsfiddle

事件的順序不應該保持不變嗎？ 這是一個鉻蟲嗎？

UPDATE

在Firefox中， change ， mouseup ，然后clicked在快速點擊，只有click事件被取消了一個緩慢的點擊。

在IE11， change然后click是在快速點擊射擊，只有mouseup是在緩慢點擊射擊。

更新與adeneo的建議：

jsFiddle1

Javascript + jQuery

$(document).ready( function () {
    $('.ddl').change( function () { console.log('ddl changed'); });
    $('.ddl').click( function () { console.log('ddl clicked'); });
});

• Chrome：沒有變化
• Firefox：沒有變化
• IE11：沒有變化

jsFiddle2

Javascript + jQuery

$(document).ready( function () {
    $('.ddl').change( function () { console.log('ddl changed'); });
    $('.ddl').click( function () { console.log('ddl clicked'); });
    $('.ddl').mouseup( function () { console.log('ddl mouseup'); });
});

• Chrome：沒有變化
• Firefox：沒有變化
• IE11：沒有變化

更新根據Wesley Murch的建議：

我有一個我正在使用的軟件包。 該軟件包動態生成HTML（模板驅動）。 我正在處理的功能是級聯下拉菜單。 有一些下拉列表具有顯示層次結構的屬性。 為了構建依賴項，我想我會綁定到change事件並調用webservice來更新子下拉列表。 現在我遇到的困境是存在與各種事件相關的預先存在的代碼。 我認為預先存在的代碼有一些代碼可以停止處理后續事件。 我暫時無法更改該代碼。 我一直認為更改事件是在click事件之前觸發的。 如果你在chrome中快速點擊它可以正常工作，但是當你想到幾秒鍾的選擇時你按住鼠標我的代碼就不會調用級聯下拉列表。

很抱歉有冗長的解釋。

Answer 1

<script>
    $(document).ready(function () {
        $('.ddl').change(function () {
            console.log("change");
        });
        $('.ddl').click(function () {
            console.log("click");
        });
    });
</script>

<select class="ddl" size="1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>

訂購

點擊select.html：15更改select.html：11 2點擊select.html：15更改select.html：11點擊