Click event fires twice, but only on touch devices

Question

$('.classy').on('click', 'button', function(){
    console.log('clicked');
})

-

<div class='classy'>
    <button> - </button>
</div>

Any reason why this would fire twice on a touch device? It works perfectly with normal mouse events.

note: I've also tried .bind .live just to make sure, same problem.

Answer 1

Try passing the event and then invoking preventDefault().

$('.classy').on('click', 'button', function(e){
e.preventDefault();
console.log('clicked');
})