raise event after multiple selection with ctrl key

StackOverflow https://stackoverflow.com/questions/12436250

Question

Hi,

I want to trigger an event on an element list. The list may have multiple selection. The event should be triggered directly, if user clicks on element without ctrl key.
If the user presses ctrl+click then, event should be triggered once the selection is done. I have written my own logic for that here.
I can prevent event from triggering immediately after click with combination of ctrl. But I am not getting the idea when to trigger my own function(lets say alert here...) ,if there is multiple selection.

Was it helpful?

Solution 

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

Note

you don't need to maintain any flag for ctrl key press. event.ctrlKey will do this for you.

OTHER TIPS

You can use the onmouseout event.

Set a flag to check if at least one is selected and if the flag was true, event should trigger your code.

You can also use setTimeout, so when the mouse goes on tag (onmouseover) your timeout gets deleted and when the mouse goes out of after something like 1 or 2 seconds event could be triggered. The benefit of this is if the user is still selecting but suddenly moves his/her mouse out, then the code will not be triggered for a few seconds.

UPDATE, here is an example:

<!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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top