Question

onclick事件在vanilla.js中使用vue不起作用

2021-11-26

313

javascript vue.js

我目前需要在应用程序中使用 vanilla.js，因为 html 实体来自数据库，我需要处理它们。由于 babel 编译已经结束，因此我使用 DOM 执行此操作。我试图在 span 内设置一个图标，每当我单击此图标时，我都想删除整个 span。问题是，我可以创建此图标并将其属性设置为 fontSize 等，但当涉及到 onclick 函数时，它不起作用，单击不会激活该函数。我已经尝试在其中使用回调函数、vue 函数等。但事件根本没有被激活。我能做什么？

        icon.classList.add("material-icons", "cancel_icon")
        icon.innerHTML = "cancel"
        icon.style.fontSize = '14px'
        icon.style.position = 'relative'
        icon.style.top = '2px'
        icon.style.left = '2px'

        icon.onclick = () => this.removeSpan(span)
        console.log(icon.onclick)
        return span

Answer 1

您可以尝试 span.childNodes[0] 或 span.firstChild

span.firstChild.addEventListener('click', this.removeSpan);

如果您想将参数传递给侦听器函数，一种方法是使用中间回调进行尝试

let _this = this;
span.firstChild.addEventListener('click', () => {
  _this.removeSpan(span);
});