在手机上记录mouseenter / mouseleave事件

Question

我有2个功能。在第一个功能mouseenter/mouseleave中，未在移动设备上检测到事件，而在第二个功能中，所有事件均正常运行。为什么第二个功能绑定移动设备上的事件而第一个不绑定事件？

/*
//does not work on mobile
$(document).on('mouseenter', '.a', function(e) {

  var currentTarget = $(e.currentTarget);

  currentTarget.addClass('b');

}).on('mouseleave', '.a', function(e) {

  var currentTarget = $(e.currentTarget);

  currentTarget.removeClass('b');

});*/

//works on mobile
$(document).find('.a').each(function(e) {

  $(this).on('mouseenter', function(e) {

    var currentTarget = $(e.currentTarget);

    currentTarget.addClass('b');

  }).on('mouseleave', function(e) {

    var currentTarget = $(e.currentTarget);

    currentTarget.removeClass('b');

  });

})

.a {
  width: 200px;
  height: 150px;
  background: red;
  margin-right: 1px;
  float: left;
}

.b {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>