Mobile Safari Event Issue

问题

I have designed a website with a menu that is initially invisible. When the user clicks on a button, the menu becomes visible. There are two ways for the user to hide the now visible menu:

Click the button that caused the menu to become visible
Click anywhere on the webpage that isn't the menu

The way I have coded the second option is to tie an onclick event to the window element, and have it compare where the user clicked to the menu's position to determine if the menu should be hidden. This works great in Firefox and Safari, but it fails in Mobile Safari.

I noticed that the window onclick event only fires when I click on another element with an onclick event already assigned. If I click on an element with no event(s) assigned, the window's onclick event never fires. If I click on the button which displays the menu, it fires along with the event tied to the button.

Is it possible to assign events to the window element in Mobile Safari?

回答1:

I'v been encountering this same problem. Here is what worked for me. (Note: I am working within a Modernizr and jQuery context)

First, I add a custom Modernizr class using Modernizr's addTest Plugin API to test for iOS, which will add the class appleios or no-appleios accordingly.

Because in my research the body seems to fire events on it's own agenda, I am taking a little precaution by wrapping all the document's content with an element in an iOS context. Then I add an event handler to this element.

$(".appleios body").wrapInner('<div id="appleios-helper" />');
$("#appleios-helper").bind("mouseup", function(){return;});

What was suggested earlier in this thread is using void(0). I did some quick testing, and found that void(0) as the event just wasn't causing touches on the body to be recognized. When I plugged in my own "empty" function in the form of function(){return;} things started working.

This all hinges on the fact that no events are fired in Mobile Safari unless the element explicitly has events to fire (Safari Web Content Guide.) By inserting this empty event on the wrapper, things will bubble up to the body.

If you're doing strait JavaScript with none of these libraries, the same effect could be achieved in the HTML markup

<html>
...
<body>
<div id="appleios-helper" onmouseup="function(){return;}">
...
</div>
</body>
</html>

This worked for me to hide tooltips when touching anywhere on the document's body. Your mileage may vary.

回答2:

Simply adding the dummy onclick handler to the html body works for me:

<body onclick="void(0)">

Note that I am using usual live event handlers as shown below:

function liveHandler( event ) {
    var target = event.target; ...}

window.addEventListener(evtype, liveHandler, true);
// evtype such as 'mousedown' or 'click'
// we use the capturing mode here (third parameter true)

回答3:

This is an old question, but I struggled with the same thing today.

I found that using touchstart event works.

I solved it like this:

var isTouchDevice = 'ontouchstart' in document.documentElement;
if (isTouchDevice) {
  // Do touch related stuff
  $(document).on('touchstart', function (event) {
    // Do stuff
  });
} else {
  // Do non-touch related stuff
  $(document).on('click', function () {
    // Do stuff
  });
}

回答4:

You could just add onclick="void(0);" to some <div> that covers the whole page so that no matter what, you are always clicking on an element that has an onclick event. Not a great solution, though.

I'd prefer not having the onclick event be tied to the window. Why don't you create a container <div> that has that event on it. Then handle it just like you currently are.

回答5:

You can also:

$('body').css('cursor', 'pointer');

No idea what those "engineers" at Apple are doing. LOL.

This has problems though. You wouldn't want to do this on every touch device. Only touch devices that don't also have a pointing device (Laptops with Touch Screens, for example).

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

The conclusion of the article is this:

So I don’t understand why all this is the case, but it most certainly is the case. If you’re having bubbling problems, just add an empty-function event handler anywhere between the body and the element, and you’re set to go. But it shouldn’t be necessary.

来源：https://stackoverflow.com/questions/3239270/mobile-safari-event-issue

标签

javascript-events

mobile-safari