Question

考虑以下HTML：

<a href="#" id="aElement" data-bind="click: printId">
   <span id="spanElement">Click Me</span>
</a>

当我点击链接时，我有一个名为 printId 的函数：

printId: function (item, event) {

    vm.textTest(event.target.id);
}

我希望event.target.id值为 aElement ，因为这是我将点击绑定设置为的元素，而是 spanElement 。有这样的原因吗？

我猜这是因为我点击的实际“实质”是span元素，但我仍然认为从编码的角度来看更有意义地抓住锚元素。毕竟，我可能在锚标记内部有多个元素，我可能希望每次都能获得一个id，而不是基于用户在锚标记内部点击的位置，我可能会抛出任何id。

然而，这可能是一个JavaScript问题，而不是淘汰赛问题。有什么想法吗？

这是一个小提琴：

JS Fiddle Demo

Answer 1

来自span的click事件冒泡DOM。使用event.currentTarget，因为它将引用事件处理程序附加到的元素。

https://developer.mozilla.org/en-US/docs/Web/API/event.currentTarget

Answer 2

这是一个javascript问题 - 范围是event.target，因为它是您点击的实际（最里面）项目。

试试这个 - 在span之外添加一些文本，然后点击它 - 你会看到event.target.id转到aElement。

如果您想要实际放置绑定的项目，请使用event.currentTarget。 event.currentTarget是监听事件的元素，event.target是收到事件的元素。

Answer 3

是的，这与javascript直接相关，而不是淘汰赛。 Knockout只是将实际的javascript事件作为参数传递。你可以使用vanilla javascript来检查它：

<a href="#" id="aElement" data-bind="click: printId"><span id="spanElement">Click Me</span> test</a>

function test(e) {
 alert(e.target.id + " / " + e.currentTarget.id);
}
document.getElementById('aElement').onclick = test;

如果点击“test”，目标ID将是“a”id。但是，如果您点击“Click Me”，您将获得span id。

见这里：http://jsfiddle.net/7CCfp/2/

为什么knockout绑定会传递span元素的id而不是anchor元素的id？

JS Fiddle Demo

3 个答案: