Question

我遇到的事情似乎与事件jquery完全错误。

我有以下简单的HTML列表

<ul>
  <li><button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button> Chocolate</li>
  <li><button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button> Butter</li>
  <li><button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button> Milk</li>
  <li><button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button> ugar</li>
</ul>

以及以下JavaScript：

$(document).on("click", "button", function(evt) {
  console.debug("got a click in", evt.target);
});

当我点击按钮时，我

got a click in <span class="glyphicon glyphicon-minus-sign"></span>

而不是按钮。

为什么？

Answer 1

事件对象的target属性指向事件的发起者;在这里，它是点击的第一个目标元素，显然是<span>。

如果您想要.on()选择的元素，jQuery会将其提供为this。

$(document).on("click", "button", function(evt) {
    console.debug("got a click in", this);
});

（请注意，使用以$(document).ready为根的委托时，您无需等待document。）

Answer 2

任何元素都可以收到点击事件。如果它没有处理它，事件将会＃34;冒泡＆＃34;通过父元素。

为什么打开＆＃34;点击，＆＃34;按钮＆＃34;而是由跨度处理？

2 个答案: