我正在创建一个按钮，用于打开用于编辑文档的模式。我将属性添加到按钮，并在单击按钮时获取它们。我在按钮的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中的图标继承其父按钮的数据属性？
如果单击了按钮内的图标，则模态没有数据，而在图标外单击但仍在按钮内单击时效果很好。
解决方案是将图标应用于CSS样式：
pointer-events: none;
在保持图标可见性的同时，有效地使图标变得微不足道。
当您尝试单击该图标时，将在它上单击鼠标右键，然后单击下面的按钮。
进一步阅读：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句