ctrl + 单击 JavaScript答案

【问题标题】：ctrl + click in JavaScriptctrl + 单击 JavaScript
【发布时间】：2013-10-22 15:05:31
【问题描述】：

关于这个问题，我已经广泛浏览了互联网，包括 stackoverflow。我的问题是我有一组“li”，当我使用 ctrl+click 手势时，我希望将多个“li”添加到数组中。我不断得到（e）未定义。我发现了这个：Detect CTRL and SHIFT key without keydown event?

但提供的答案似乎对许多人都有效，但对我却不适用。每当我使用它时，即使作为脚本中的唯一项目，萤火虫也不会在控制台中响应，但我得到：“ReferenceError：e 未定义。”我用的是火狐。

我最大的问题是让 this 将其添加到函数中，并且作为事件触发的函数可以区分 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();
}

【问题讨论】：

到目前为止你能发布你的代码吗？（最好在小提琴或类似的东西中）
@mookamafoob 最好不在小提琴中；代码必须进入问题，否则问题应该关闭。
实际上 :) 在这里发布您的代码，如果您希望我们将问题可视化并快速获得可靠的答案，那么小提琴就是如此。
@meagar 我的意思并不是完全在小提琴中：P 但一个例子更容易调试
您的elementClick 函数不接受任何参数。您没有正确遵循Detect CTRL and SHIFT key without keydown event? 中的示例。那里的例子有function(e) { ... }，你的例子是function() { ... }。这就是为什么您会收到 e is not defined 的消息：该示例将 e 定义为参数，但您的代码从未定义 e。

标签： javascript events click ctrl

【解决方案1】：

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

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

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

【讨论】：

要支持 mac，您还应该检查 || e.metaKey

【解决方案2】：

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

制作两个变量，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时的正常处理方式。然后加载器数组收集变量，您可以使用for() 或其他循环对数组执行任何操作。

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

感谢所有提供帮助的人，我希望这对其他人有帮助！ :)

【讨论】：