javascript - 获取点击元素的类名

Question

我有一些动态创建的 divs 。当用户点击屏幕时，我想检查它是否在动态创建的 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 !!!");
                    }
                }
           });

标签： javascriptjquery

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>