获取所单击元素的类名
获取所单击元素的类名
提问于 2019-05-23 02:23:12
我有一些动态创建的div。当用户点击屏幕时，我想检查它是否在一个动态创建的divs.But上，它似乎不能工作。我已经有了一个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 !!!");
}
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-23 03:46:05
我认为你需要先使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56262832
复制相关文章
相似问题