ctrl + click in JavaScript

Question

I have browsed the internet extensively on this issue, including stackoverflow. My problem is that I have a set of 'li', and I want multiple 'li' added to an array when I use ctrl+click gesture. I keep on getting (e) is not defined. I have found this: Detect CTRL and SHIFT key without keydown event?

But the answer provided, which seems to have worked for many, doesn't for me. Whenever I use that, even as the sole item in my script, firebug doesn't respond in the console, but I get: " ReferenceError: e is not defined." I'm using Firefox.

My biggest problem is getting this to add this to a function, and the function, which fires as an event, can distinguish between the a ctrl+click and normal click.

Any expertise to help me out? Vanilla Javascript preferred.

The point of this exercise is to remove the LI when clicked, but I want to delete multiple at once if I hold down ctrl. Perhaps by storing them in an array. EDIT: Some Code

    <ul id = "ulItem">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>

<script>

window.onload = function(){
var ulItem = document.getElementById("ulItem"); //gets UL with the "ulItem" ID.
var ulList = ulItem.getElementsByTagName("li"); //gets ulItem's "li" in an array.



///prepareLI function.///
var prepareLi = function(){

for(i = 0; i < ulList.length; i++){

ulList[i].addEventListener('click', elementClick);
}
}

//adds the same event listener to each of the "li" inside "UlList" array. Each activated by a click.




///elementClick function.///

var elementClick = function(){

ulItem.removeChild(this);

} //if this is a child of parent, UlList, remove it.

prepareLi();
}

Answer 1

I think I found an alternative way to do this. If you want to emulate a Ctrl+click in order to select multiple objects, this worked for me as a workaround:

make two variables, loader and loaderArray:

var loader = 1;
var loaderArray = [];

set a document event:

document.addEventListener('mousedown', MultiSelect);

and a click event on the item:

document.addEventListener('click', singleSelect);

Make sure the window event is is a mousedown item, also, that Ctrl is defined as keyCode == 17. The number part is VERY important. Here is code I used:

    function loadArray(e) {

        if (e.keyCode === 17) {

            //console.log("key down");

            loader = 2;

        };

    }

Then I set a separate function on the singleSelect event stating that if loader ==2, use loaderArray.push(this) rather than the normal way of doing things when loader == 1. The loader Array then collects the variables, and you can do whatever you want with the array using for() or some other loop.

Now, whenever I click the Ctrl key, the mousevent on the document turns the loader variable to 2, and it can distinguish between Ctrl+click and normal click this way.

Thanks for all those that helped, and I hope this will help others! :)

Answer 2

The browser is correctly telling you that you never declared e, while the example in Detect CTRL and SHIFT key without keydown event? has defined e, by declaring it as a formal argument to the listener function.

var elementClick = function(e){
    if(e.ctrlKey) {
        ulItem.removeChild(this);
    }
}

Note the use of function(e){ rather than function(){