Mobile Safari sometimes does not trigger the click event

问题

This is a dynamic JavaScript application I am working on. I have many <a> anchor elements that have a class. When that class is clicked, something should happen. This works fine in Firefox, Chrome, IE, but in some cases the click event is not triggered on mobile Safari (iPad and iPhone).

These elements all have exactly the same CSS, it's just their position that differs (they are in different containers).

I tried various solutions that I found here but with no luck. For instance:

setting the cursor to pointer
the code in this answer

Do you have any other idea that might help me find a solution to this? Why does the click event triggers only in some cases?

回答1:

The click event resulting from a tap on iOS will bubble as expected under just certain conditions -- one of which you mentioned, the cursor style. Here is another:

The target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.

http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

This is much better fix vector, and can be done without a browser check. You do have to add an extra div due to the "not including the <body>" part:

<body>
  <div onclick="void(0);">
    <!-- ... all your normal body content ... -->
  </div>
</body>

Now every click event originating inside that div will bubble as expected in iOS (meaning you can catch them with $(document).on('click', '.class', etc...)).

回答2:

Have you tried this?? This is because ios doesn't fire the click event sometimes, only recognizes the touch event

$(document).on('touchstart click', [Selector], [ Event ]

回答3:

Just declaring these empty event listeners does the trick. Just try it :)

This will make it work on all browsers:

container.addEventListener('touchstart', () => {});
container.addEventListener('touchend', () => {});
container.addEventListener('touchcancel', () => {});
container.addEventListener('touchmove', () => {});

回答4:

This is a crazy issue and indeed LinusR's answer and the description on quirksmode are accurate. My general click event listener didn't work because of this in iOS Safari:

window.addEventListener('click', function(event) {
    alert("Where's my click?!");
});

I now have wrapped my app with a <div onclick="void(0);"></div> and that works. I also added some extra things to fix some issues that came out of it:

<div onclick="void(0);" style="height: 100%; -webkit-tap-highlight-color: transparent;">
  <div style="height: 100%; -webkit-tap-highlight-color: initial;">
    <my-app></my-app>
  </div>
</div>

I needed the height: 100%; to make the click available on the whole page because I needed that. If you don't do height: 100%; the click event will still only fire within the height of the div.

The -webkit-tap-highlight-color: transparent; is to prevent an onclick flash overlay style, as iOS does this by default with clickable elements. The div after that restores the initial value of that CSS property, so that other clickable elements do have normal behavior in this regard. See this answer for more info.

回答5:

There is an additional event for mobile devices. Try to add the tap event listener in addition to the click event. They can be attached simultaneously with the following:

$(document).on('click tap', [selector], [handler])

来源：https://stackoverflow.com/questions/24077725/mobile-safari-sometimes-does-not-trigger-the-click-event

标签

javascript

jquery

css

mobile-safari

dom-events