javascript - 如何将事件处理程序分配给多个元素(colorPicker)

我试图找到一种方法，将事件处理程序分配给我动态创建的每个框。此时，用户可以单击“在上面添加”或“在下面添加”，两行框将显示在他们单击的任何位置。
我正试图使它，以便当用户点击一个特定的方块，一个颜色选择器将弹出，并可以改变该特定方块的颜色。
然而，我的程序有点小毛病，它只对用户点击的第一个方块起作用，颜色选择器再也不会弹出。
有没有人知道我该怎么解决这个问题，还是有更好的选择？
我的代码：
http://codepen.io/anon/pen/bwBRmw

var theParent = document.querySelector(".container");
theParent.addEventListener("click", doSomething, false)

//var picker = new Picker()
function doSomething(e) {
    console.log("gets inside doSomething")
    console.log(e.target)
    console.log(e.currentTarget)
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.id;
        console.log("Hello " + clickedItem);
        var k = document.getElementById(clickedItem)
        var picker = new Picker(k)
        picker.show();

    }
     picker.on_done = function(colour) {
        $(k).css('background-color',colour.rgba().toString());
        picker.hide()
        }

    //e.stopPropagation();
}

最佳答案

我在你的代码笔中注意到你没有发布doSomething的完整代码。您遇到了一个问题，因为picker变量是函数的局部变量。如果代码执行不落在If语句中，则不会创建picker变量。只需取消注释在函数外部声明picker变量的代码，然后从实例化新选择器的代码行前面删除var指令。此外，还需要重置选择器的“parent”元素，因为页面上只有一个选择器：picker.settings.parent = k;

var picker = null; // Initialize global variable

function doSomething(e) {
    console.log("gets inside doSomething")
    console.log(e.target)
    console.log(e.currentTarget)
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.id;
        console.log("Hello " + clickedItem);
        var k = document.getElementById(clickedItem)

        // Reference the global "picker" variable
        if (!picker) {
          picker = new Picker(k)
        } else {
          // Set the "parent" element of the picker to the newly clicked element
          picker.settings.parent = k;
        }
        picker.show();

    }
     picker.on_done = function(colour) {
        $(k).css('background-color',colour.rgba().toString());
        picker.hide()
        }

    //e.stopPropagation();
}

关于javascript - 如何将事件处理程序分配给多个元素(colorPicker)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39622366/