直接单击图标时不传递按钮的值属性

Question

我有一个使用引导程序创建的 html 按钮，它本质上是一个用于切换网站上项目状态的图标。

<button class='btn' value='${noteid}' onclick='toggleAck(event)'><i class="fas fa-eye"></i></button>

当它被点击时，一个请求被触发：

function toggleAck(event) {
            const noteid = event.target.value
            console.log(event.target)
            $.post({
                    url: `/note/${noteid}/toggleacknowledge`,
                    dataType: "json"
                },
                (response) => {
                    if (!response.success) {
                        alert("Failed to mark as read")
                    }
                    refreshNotes()
                }
            )
        }

无论我单击按钮还是图标，都会触发 toggleAck 事件。 但是，如果我直接单击图标而不是按钮，则不会传递value属性并且函数失败。

如何修复此 HTML，以便无论用户单击何处都传递该值？

Answer 1

value在按钮上，但event.target是触发事件的元素，因此当您单击图标时，它会尝试从图标中检索值。

而是使用event.currentTarget从侦听器附加到的元素中获取值。

const noteid = event.currentTarget.value;

 function toggleAck(event) { console.log('target: ', event.target, event.target.value); console.log('currentTarget: ', event.currentTarget, event.currentTarget.value); }

 <button class='btn' value='${noteid}' onclick='toggleAck(event)'><i class="fas fa-eye">icon</i></button>