2

やあ、

要素リストでイベントをトリガーしたい。リストには複数の選択肢がある場合があります。ユーザーがキーなしで要素をクリックした場合、イベントは直接トリガーされる必要がありctrlます。
ユーザーが+クリックを押すctrlと、選択が完了するとイベントがトリガーされます。そのための独自のロジックをここに記述しました。
の組み合わせでクリック直後にイベントが発生するのを防ぐことができますctrl。しかし、複数の選択がある場合、自分の関数をいつトリガーするか（alertここで言いましょう...）がわかりません。

4

2 に答える 2

4 
var str = "";
$(document).ready(function() {

    // bind only click event

    $('ul > li').on('click', function(event) {

        // if ctrl key is press

        if (event.ctrlKey) {
            str = str + $(this).text() + ",";
        } else {
            str = $(this).text();
            alert(str);
            str = '';  // after alert reset the str
        }
    });

    // bind a keyup event
    $(document).on('keyup', function(event) {

        // str is not empty and ctrl key is released
        // show alert
        if(str && !event.ctrlKey) {
            alert(str);
        } 
        str = ''; // after alert reset the str
    });
});​

デモ

ノート

ctrlキーを押すためのフラグを維持する必要はありません。event.ctrlKeyあなたのためにこれを行います。

于 2012-09-15T09:59:30.530 に答える
0

イベントをご利用いただけますonmouseout。

フラグを設定して、少なくとも1つが選択されているかどうかを確認します。フラグがtrueの場合、イベントによってコードがトリガーされます。

を使用することもできます setTimeout。そのため、マウスがタグ（onmouseover）に入ると、タイムアウトが削除され、1秒または2秒のイベントがトリガーされた後にマウスが終了します。これの利点は、ユーザーがまだ選択しているが突然マウスを外に出した場合、コードが数秒間トリガーされないことです。

更新、ここに例があります：

<!DOCTYPE>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
        <script type="text/javascript">
            var str = '';
            var _ctrlPressed  = false;
            var my_timer;
            var my_flag = false;

            function set_timer(){
                my_timer = setTimeout(selection_end, 2000);
            }

            function reset_timer(){
                clearTimeout(my_timer);
            }

            function selection_end(){
                if(_ctrlPressed && my_flag && str != ''){
                    my_flag = false;
                    alert('Selection is done: ' + str);
                }
            }

            $(document).ready(function(){
                $('ul > li').click(function(event){
                    if(event.ctrlKey){
                        _ctrlPressed = true;
                    }else{
                        _ctrlPressed = false;
                    }

                    if(_ctrlPressed){
                        str = str + $(this).text()+",";
                        my_flag = true;
                        return false;
                    }else{
                        str = $(this).text();
                    }
                    alert(str);
                });
            });
        </script>
    </head>
    <body>
        <ul onmouseover="reset_timer();" onmouseout="set_timer();">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        <ul>
    </body>
</html>
于 2012-09-15T09:53:28.913 に答える