HTML5 Video Element on iPad doesn't fire onclick?

问题

I am using the video element in my HTML as following:

<div id="container" style="background:black; overflow:hidden;width:320px;height:240px">
<video style="background:black;display:block" id="vdo" height="240px" width="320px" src="http://mydomain/vid.mp4"></video></div>

And in javascript I am doing this:

var video=document.getElementById('vdo');
var container=document.getElementById('container');
video.addEventListener('click', function(e) {
  e.preventDefault();
  console.log("clicked");
}, false);
container.addEventListener('click', function(e) {
  e.preventDefault();
  console.log("clicked");
}, false);

On desktop safari/chrome everything is working fine. I can see two "clicked" in the console. But on ipad there is nothing. First I tried with iOS versin 3.2, then I updated it to the latest one 4.2.1 without any success.
I found a similar question HTML5 Video Element on iPad doesn't fire onclick or touchstart events? where it suggests not to use controls in video tag and I am not using it.

回答1:

This is a very late answer, but in case anyone wonders. If you change your event to "touchstart" it will work.

    video.addEventListener('touchstart', function(e) {

This behavior seems sort of random to me, because click works most of the time. I have not looked into exactly why and when

回答2:

Have you confirmed there are currently no other clicks that are interfearing with that event? What I've done is first unbind on the particular event before adding the new listener.

ie:

video.unbind("click").click(function(){...}

I found this to fix the issue I was having.

回答3:

I tried unbind/click as suggested by Frederico, but I still didn't receive any click events. I do, however, get touchstart and touchend events OK. (I'm actually getting them from a div one level up in the DOM, but I expect you could also get them from the video element just the same.)

来源：https://stackoverflow.com/questions/4654443/html5-video-element-on-ipad-doesnt-fire-onclick