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

Question

我有一个使用 bootstrap 创建的 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>

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

Value attribute of button not passed when icon is clicked directly

html

javascript

jquery

jinja2

bootstrap-4