[英]WeakMap with event.target
编辑:结果证明第二个片段(我的真实代码)实际上没有任何问题。 在一个页面上它有效,而在另一个页面上它没有。 是的,对于潜在的错误。
我正在创建一个 DOM 元素并将该 DOM 元素作为键提供给 WeakMap。 然后,使用 JQuery 事件委托/事件侦听器,我试图检索保存的密钥,但它返回未定义:
const item = document.createElement("div"), __data = new WeakMap();
__data.set(item, {hello: "123"})
document.body.appendChild(item)
// later on in event delegation
$("div").on("click", function(event) {
const target = event.target, data = __data.get(target);
console.log(data)
// prints undefined
任何人都知道为没有 ID 的 DOM 元素保存数据的问题或替代方法吗?
编辑:我有点恼火我做的例子有效,但我自己的代码没有......(有些位看起来多余。这是根据我的实际代码建模的,所以并不是所有丢失的部分都在这里,只是务实)但是这是显然有效的代码:
const __data = new WeakMap(); function buildingItem() { const item = document.createElement("div"); item.setAttribute("data-action", "delete"); __data.set(item, {hi: 123}); return item; } function build() { const main = document.getElementById("main") for (let i = 0; i < 3; i++) { const container = document.createElement("div"), attached = document.createElement("div"); const build = buildingItem(), data = __data.get(build); build.classList.add("classified"); data["hello"] = `Item ${i}` __data.set(build, data); build.innerText = `Item ${i}` attached.append(build); container.append(attached); main.append(container); } } build() $(document).on("click", "div.classified[data-action]", function(event) { const target = event.currentTarget, data = __data.get(target); console.log(`CTarget Data: ${data["hello"]}`) })
<div id="main"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
两个可能的问题:
target
是被点击的最里面的元素。 您可能需要this
或event.currentTarget
,它是您挂钩事件处理程序的元素(可能是target
的祖先元素)。
您的 jQuery 代码连接了所有div 元素上的click
事件,而不仅仅是那个,但您在WeakMap
中只有一个div
。 如果您单击不同的 div,您自然会得到undefined
,因为其他div
不是 map 中的键。
这是一个示例(我在 map 的div
中添加了一个span
来演示#1,还添加了第二个div
来演示#2):
const item = document.createElement("div"), __data = new WeakMap(); __data.set(item, {hello: "123"}); document.body.appendChild(item); item.insertAdjacentHTML("beforeend", "<span>Click me, I'll work</span>"); document.body.insertAdjacentHTML("beforeend", "<div>Click me, I won't work (I'm not a key in the map)</div>"); $("div").on("click", function(event) { const target = event.currentTarget, data = __data.get(target); console.log("with currentTarget:", data); // Note that using `event.target` wouldn't hav eworked console.log("with target:", __data.get(event.target)); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
您已经提到,在您的真实代码中,您正在使用事件委托。 currentTarget
和this
在这种情况下都很好:
// Event delegation $(document.body).on("click", "div.example", function(event) { const data1 = __data.get(event.currentTarget); console.log("using currentTarget:", data1); const data2 = __data.get(this); console.log("using this:", data2); }); // Adding the relevant `div` const item = document.createElement("div"), __data = new WeakMap(); __data.set(item, {hello: "123"}); item.className = "example"; item.textContent = "Some text to make div clickable"; document.body.appendChild(item);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.