创建元素，并将父属性添加到innerHTML答案

【问题标题】：Create element, and add parent attributes to innerHTML创建元素，并将父属性添加到innerHTML
【发布时间】：2020-02-18 08:15:58
【问题描述】：

我正在创建一个用于打开用于编辑文档的模式的按钮。我向按钮添加属性并在单击按钮时抓取它们。我在按钮的 innerHTML 中添加了一个图标，但它不继承属性（即，如果单击按钮内的图标，则模式没有数据，同时单击图标外部但仍在内部按钮工作正常）。

const edit = document.createElement('button')
edit.innerHTML = '<svg class="review__icon"><use xlink:href="/img/icons.svg#icon-edit"></use></svg>'

edit.setAttribute('data-key', el._id)
edit.setAttribute('data-title', el.title)
...

现在显然我可以为图标添加相同的属性，但这似乎很愚蠢。有没有办法让我的 innerHTML 中的图标继承其父级按钮的数据属性？

【问题讨论】：

你能显示监听器的连接位置吗？您是否将其附加到 edit 变量？
是的，编辑按钮/变量上有一个点击监听器

标签： javascript html

【解决方案1】：

如果单击按钮内的图标，则模式没有数据，在单击图标外部但仍在按钮内部时工作正常。

解决办法是给图标应用 CSS 样式：

pointer-events: none;

在保持图标可见性的同时，这有效地使图标变得虚无缥缈。

当您尝试点击该图标时，您会直接点击它，然后点击下方的按钮。

进一步阅读：

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

【讨论】：

【解决方案2】：

与其再次重复属性，或者根本设置属性，不如简单地在监听器中引用el？

const edit = document.createElement('button')
edit.innerHTML = '<svg class="review__icon"><use xlink:href="/img/icons.svg#icon-edit"></use></svg>'
edit.addEventListener('click', () => {
  console.log(el._id);
  console.log(el.title);
});

（如果这是在循环中，请确保 el 声明为 const 或 let）

【讨论】：