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.

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

Note

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