3

選択時のjQueryの変更イベントがぼかしまたはマウスクリックでのみ発生することを多くの場所で見てきましたが、試してみると、矢印キーを押すたびにイベントも発生します。矢印を使用してオプションを選択したときに変更イベントが発生しないようにしようとしています。例えば：

<select size="4" id="more" name="more" required="required">
    <option value="0">No</option>
    <option value="1">Yes</option>
    <option value="2">Maybe</option>
    <option value="3">No clue</option>
</select>

$('#more').on('change', function(event){
    alert('hi');
});​

このフィドルは、次の場合に発生するイベントを示しています: http://jsfiddle.net/McWatt/x5cTr/7/

jQueryのchange（）ページによると、タブで選択してから矢印を使用してオプションを選択すると、選択がフォーカスを失うまで変更イベントは発生しません（少なくともそれが私が読んでいる方法です）。実際には、矢印キーを押すたびに変更イベントが発生するのを見ています。

http://api.jquery.com/change/

選択ボックス、チェックボックス、およびラジオ ボタンの場合、ユーザーがマウスで選択を行うとすぐにイベントが発生しますが、他の要素タイプの場合、要素がフォーカスを失うまでイベントは延期されます。

この動作は変更されましたか、それとも機能を理解していませんか?

更新: jQuery のドキュメントを読み間違えていましたが、より明確になる可能性があります。私はその実現につながった答えを受け入れました。私の問題の実際の解決策として、矢印が使用された場合にデータ属性を false に設定する select に keydown イベントをバインドしました。次に、変更バインディングで、データ属性が true の場合にのみ変更時にコードを実行するように条件を設定しました。これは、矢印が使用された場合に変更コールバック コードを効果的に強制終了するため、最善の解決策ではありませんが、(ボタンを介して) 機能をトリガーする別の方法があるため、この機能を使用できます。

Update2: これは動作するフィドルです: http://jsfiddle.net/McWatt/BR8QQ/

// prevent change event being fired on arrow keys
$('#more').data('activation', 'activated').bind({
    keydown: function(event) {
        if(event.which === 38 || event.which === 40){
            $(this).data('activation', 'paused');
        }
    },
    click: function(event) {
        if($(this).data('activation') === 'paused'){
            $(this).data('activation', 'activated');
            $(this).trigger('change');
        }
    },
    change: function(event) {    
        if($(this).data('activation') === 'activated'){
            var time = new Date();
            $('#changed').text(event.type + ": " + time.getTime());
        }
    }
});

</p>

4

2 に答える 2

3

不正確なようです。私が知る限り、バニラのchangeイベントと何ら変わりはありません。

基本的に、値が変更された後にテキストベースの入力がフォーカスを失うたびに、イベントが発生します。チェックボックスがクリックされる (またはフォーカスされているときにスペースバーで切り替える) たびに、イベントが発生します。ラジオ ボタンが選択されると (クリック、スペースバー、矢印キーなど)、イベントが発生します。選択ボックスが (選択、矢印キーなどで) 変更されるたびに、イベントも発生します。

この点では、jQuery は通常の JS と変わりません。

于 2012-12-18T21:25:06.670 に答える
1

そこにクリックチェックを追加することもできます

$('#more').change(function(event){
    $(this).click(function(event){
    var time = new Date();
    $('#changed').text(event.type + ": " + time.getTime());
    });
 });​

http://jsfiddle.net/x5cTr/13/

于 2012-12-18T21:31:52.010 に答える