Question

我有一些动态创建的div。当用户单击屏幕时，我想检查它是否在动态创建的div之一上，但是似乎不起作用。我已经有一个window.addeventListener，但是它对于动态创建的div也无效。

            var divk = document.createElement("div");
            divk.className="divk";
             window.addEventListener('click', function(e){
                if (document.getElementById('outside_click_purpose').contains(e.target)){
                    currentItem = e.target;
                    if (currentItem.classList.contains("divk")) {
                      alert("contains !!!");
                    }
                }
           });

Answer 1

我认为您需要先使用event delegation然后再使用matches

注意我们的使用方式

e.target.matches('.dynamic')

要检查是否存在我们的课程，我们可以使用任何有效的css selector

例如，如果我们要确保它是一个div：

e.target.matches('div.dynamic');

请参见下面的演示

// Add some dynamic divs
const getDiv = (content) => {
  const div = document.createElement('div');
  div.className = 'dynamic';
  div.innerHTML = content;
  return div;
};

const setMessage = (msg) => document.querySelector('.clicked').innerText = msg;

document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('#container');
  for(let i = 0; i< 10; i++) {
    container.appendChild(getDiv(`Dynamic ${i}`));
  }
});

// Use event delegation
document.addEventListener('click', (e) => {
  if(e.target.matches('.dynamic')) {
    setMessage(`Clicked a dynamic div - text ${e.target.innerText}`);
  }
  else {
    setMessage('Click was not on dynamic');
  }
  
});

.clicked {
  height: 20px;
  border: 1px solid red;
}

.manual {
  background-color: blue;
  color: white;
}

<div class="clicked"></div>
<div class="manual">Manual</div>
<div class="manual">Manual</div>
<div id="container"></div>

获取被单击元素的类名

1 个答案: