触摸并单击相同元素上的事件以及特定于浏览器的奇怪（？）问题

Question

https://jsfiddle.net/g4yt3e4o/

<button class="button">

</button>

html,body,div,button {margin:0;padding:0;border:0;background:transparent;outline:none;}

.button {
  position: relative;
  width: 100px;
  height: 50px;
  background: #0f0;
}
.button:after {
  position: absolute;
  display:block;
  content: '';
  background: #f00;
  top: 0;
  bottom:0;
  left: 0;
  right:0;
  margin: auto;
  display:none;
}
.button:not(:active):after {
  display:block;
}


// find elements
var button = $("button")

// handle click and touch
button.on("click touchstart", function(e){
  e.stopPropagation();
  e.preventDefault();
})

因为当您在桌面模式下单击它时（使用chrome以便更好地理解）它可以正常工作。当您切换到移动视图（在chrome上）时，它不会。

简单地说 - 它在移动设备上无法正常工作（带触摸）......

有没有人遇到过这种问题？