Question

我在这个问题上广泛浏览了互联网，包括stackoverflow。我的问题是我有一套'li'，当我使用ctrl + click手势时，我希望将多个'li'添加到数组中。我继续得到（e）没有定义。我发现了这个：Detect CTRL and SHIFT key without keydown event?

但提供的答案似乎对许多人有用，但对我来说并不适用。每当我使用它时，即使作为我脚本中的唯一项目，firebug也没有在控制台中响应，但我得到：“ReferenceError：e未定义。”我正在使用Firefox。

我最大的问题是将此函数添加到函数中，并且作为事件触发的函数可以区分ctrl + click和普通单击。

任何帮助我的专业知识？ Vanilla Javascript首选。

本练习的目的是在单击时删除LI，但如果按住ctrl，我想立即删除多个。也许将它们存储在一个数组中。编辑：一些代码

    <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

浏览器正确地告诉您，您从未声明e，而Detect CTRL and SHIFT key without keydown event?中的示例已定义e，将其声明为侦听器函数的正式参数。

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

请注意使用function(e){而不是function(){

Answer 2

我想我找到了另一种方法。如果你想模拟一个 Ctrl +点击以选择多个对象，这对我来说是一个解决方法：

创建两个变量，loader和loaderArray：

var loader = 1;
var loaderArray = [];

设置文档事件：

document.addEventListener('mousedown', MultiSelect);

和项目上的点击事件：

document.addEventListener('click', singleSelect);

确保窗口事件是mousedown项目， Ctrl 定义为keyCode == 17。数字部分非常重要。这是我使用的代码：

    function loadArray(e) {

        if (e.keyCode === 17) {

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

            loader = 2;

        };

    }

然后我在singleSelect事件上设置了一个单独的函数，声明如果loader ==2使用loaderArray.push(this)而不是loader == 1时正常的做事方式。然后，加载器Array收集变量，您可以使用for()或其他循环对数组执行任何操作。

现在，每当我单击 Ctrl 键时，文档上的mousevent将loader变量变为2，它可以区分 Ctrl +单击并正常单击此方式。

感谢所有帮助过的人，我希望这会对其他人有所帮助！：）

ctrl +在JavaScript中单击

2 个答案: