Question

我需要在这里实现的是将click事件监听器添加到一系列包含图像缩略图的span元素中，以便使它们可选。这些是在用户使用相对表单输入文件时动态创建的。

到目前为止我管理的是引用包含它们的输出元素的新创建的childNodes。

HTML：

<div id="imageBox"><output id="list"><!-- Newly created span elements here --></output></div>

具有全局范围的相对脚本：

var father = document.getElementById('list');
var children = father.childNodes;

然后我在body元素监听器中全局处理了点击次数：

document.body.addEventListener('click', function( event ) {

if (children) {

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

  children[i].addEventListener("click", function(){
    if(this.style.boxShadow === '') this.style.boxShadow ='0 0 1em blue';
    else this.style.boxShadow = '';}, false);
    }
  }

}, false);

但正如我所料，只需双击新元素即可。

我试图在一个函数中添加一个回调函数，该函数包含上面的循环，在读取和加载所选文件输入的函数中，但它不起作用。

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);

      console.log(children.length);

      clickable();
    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
}


}

function clickable(){
if (children) {

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

  children[i].addEventListener("click", function(){
    if(this.style.boxShadow === '') this.style.boxShadow ='0 0 1em blue';
    else this.style.boxShadow = '';}, false);
    }
  }
}

有关如何处理此问题的任何想法，只需点击一下即可使用吗？

小提琴：

https://jsfiddle.net/b130p9tb/2/

进展更新：

现在它正常工作，正确响应单击，但是当尝试选择多个项目时，它仅适用于项目的对或不均匀值，因此对应于这些项目的数量。例如。：有一个项目，它工作正常，但有两个只有第二个是可选择的。有三个而不是第一个和第三个，依此类推。

更新了小提琴：https://jsfiddle.net/b130p9tb/3/

Answer 1

问题在于，每次添加图片时都要向所有元素添加侦听器。因此，当您添加第一张图片时，您有一个事件监听器。然后，当您添加第二张图片时，您的第一个元素有2个事件侦听器。所以它选择，然后立即取消选择。等

更简单的方法是在列表元素上添加侦听器，并使用事件目标修改样式。如果侦听器位于list元素上，则目标将是实际单击的图像。因此，只有一个侦听器，您就有了预期的行为。此外，您可以使用类简化样式切换。像这样：

document.getElementById('list').addEventListener("click", function (e) {
    e.target.classList.toggle('selected');
}, false);

https://jsfiddle.net/ugvqy1r5/1/

如何动态地将事件侦听器添加到NodeElement

1 个答案: