javascript - jQuery stopImmediatePropagation() の mouseenter および click イベントに関する問題

Question

マウスとタッチスクリーンで動作するように、ホバー ( mouseenter/ mouseleave) とイベントに応答するメニューを作成しました。click

これは非常に単純化されたバージョンです：

$('.menu-item')
  .on('click', function(e) {
    $(this).toggleClass('active');
  })
  .on('mouseenter', function(e) {
    e.stopImmediatePropagation();
    $(this).addClass('active');
  })
  .on('blur mouseleave', function(e) {
    $(this).removeClass('active');
  });

.menu-item {background:red; text-align:center; padding:20px 0;}
.active {background:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="menu-item">test</div>

私が抱えている問題は、要素がタッチされたときにタッチパッドがイベントmouseenterとイベントの両方をトリガーし、クラスが追加されてからオフになることです。を追加しましたが、両方のハンドラーが同じイベントによってトリガーされます。click'active'stopImmediatePropagation()