Question

您好，

我想在元素列表上触发事件。该列表可能有多个选择。如果用户点击没有ctrl键的元素，则应直接触发该事件如果用户按下ctrl +单击，则应在选择完成后触发事件。我为here编写了自己的逻辑。
点击组合ctrl后，我可以阻止事件立即触发。但是我没有想到什么时候触发我自己的功能（如果有多个选择，请在这里说alert ...）。

Answer 1

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
    });
});

的 DEMO 的

注意

您无需为ctrl按键保留任何标记。 event.ctrlKey会为你做这件事。

Answer 2

您可以使用onmouseout事件。

设置一个标志以检查是否至少选择了一个，如果标志为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>

使用ctrl键进行多次选择后引发事件

2 个答案:

注意