-webkit-user-select: none; - not working

Question

I'm creating a site that will be viewed on the iPad and I'm trying to prevent the copy and paste bubble from appearing when the user touches and holds on an image because I'd like something to happen ontouchstart and ontouchend.

Here is my html

<img class="appImg" src="img/fundMobile.jpg" />

Here is my css

.appImg{        
    -webkit-user-select: none;
}

Once I press and hold on my iPad the bubble still appears. Any ideas on how to fix this?

Answer 1

You could try including e.preventDefault() in the ontouchstart handler:

yourElement.ontouchstart = function(e) {
  e.preventDefault();
}