2

你好，

我想在元素列表上触发一个事件。该列表可能有多项选择。ctrl如果用户在没有键的情况下单击元素，则应直接触发该事件。
如果用户按下ctrl+click 然后，一旦选择完成，应该触发事件。我在这里写了我自己的逻辑。
我可以防止在单击后立即触发事件，并结合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事件。

设置一个标志以检查是否至少选择了一个标志，如果标志为真，则事件应触发您的代码。

您也可以使用 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 回答