为什么"点击，按钮"由跨度处理？

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的委托时，您不必等待$(document).ready)

Answer 2

任何元素都可以接收点击事件。如果它不处理它，事件将通过父元素"冒泡"。