IOS设备mouseout触摸事件异常求助及代码优化建议

Hey there! I totally get your frustration with iOS touch behavior messing up your tooltip plugin—Safari's handling of hover and tap can be such a headache. Let's break down solutions for your issues, plus some code cleanup tips to make things smoother.

Quick Recap of Your Issues #

• After tapping to dismiss the tooltip, links stay stuck in a hover state
• First tap opens the tooltip, second tap triggers the link (you want tapping blank space to reset everything so the next tap reopens the tooltip)

Solution for Touch State Reset #

The core problem is that Safari persists the :hover state on elements after a tap unless you explicitly remove it. We'll adjust your touch event handlers to:

1. Track if we're dealing with a tap (not a swipe)
2. Reset hover states and tooltip status when tapping blank areas
3. Manage link hover states manually instead of relying on Safari's native behavior

Here's revised code with these fixes:

// Use semantic variable names for clarity
let isTap = false;
// Track the link that currently has an active tooltip/hover state
let activeTooltipLink = null;

$(document)
  .on('touchstart', function() {
    isTap = true;
  })
  .on('touchmove', function() {
    isTap = false;
  })
  .on('click touchend', function(event) {
    // Treat click events as taps for consistency across devices
    if (event.type === "click") isTap = true;

    if (isTap) {
      const target = $(event.target);
      const tooltipLinks = '.your-tooltip-link-class'; // Replace with your actual link class
      const tooltipContainer = '.your-tooltip-container-class'; // Replace with your tooltip's class

      // Case 1: Tapped blank space (not link or tooltip)
      if (!target.closest(tooltipLinks).length && !target.closest(tooltipContainer).length) {
        // Reset hover state on the active link
        if (activeTooltipLink) {
          activeTooltipLink.removeClass('hover'); // Replace with your CSS hover class
          activeTooltipLink = null;
        }
        // Dismiss the tooltip
        TT_Item_wegmachs();
      } 
      // Case 2: Tapped a tooltip link
      else if (target.closest(tooltipLinks).length) {
        const tappedLink = target.closest(tooltipLinks);
        // If this is the same link with an active tooltip, trigger the link
        if (activeTooltipLink && activeTooltipLink.is(tappedLink)) {
          window.location.href = tappedLink.attr('href');
        } 
        // Otherwise, open the tooltip and set active state
        else {
          // Reset previous active link first
          if (activeTooltipLink) activeTooltipLink.removeClass('hover');
          activeTooltipLink = tappedLink;
          tappedLink.addClass('hover');
          // Call your tooltip open function here (replace with your actual function)
          // TT_Item_zeigets(tappedLink);
        }
        // Prevent default to avoid double-triggering the link
        event.preventDefault();
      }
    }
  });

Key Changes:

• Added activeTooltipLink to track which link has an active tooltip/hover state
• Explicitly add/remove a hover class (replace .hover with your actual CSS hover class) instead of relying on Safari's stubborn native hover
• When tapping blank space, reset the active link's state and dismiss the tooltip
• Adjusted link tap behavior: first tap opens tooltip, second tap triggers the link—unless you tap blank space to reset everything

Code Cleanup Tips #

1. Combine Event Bindings: Your original code binds three separate events to document—we chained them into a single .on() call for cleaner, more concise code.
2. Semantic Variable Names: detectTap → isTap makes the intent instantly clear to anyone reading the code.
3. Limit Event Scope: Instead of listening to all click/touchend events on the entire document, consider delegating to only the elements that matter (your tooltip links and tooltip container) to reduce unnecessary event handling.
4. Avoid Global Variables: Wrap your tooltip logic in an IIFE or a class to keep variables like isTap and activeTooltipLink out of the global scope, preventing conflicts with other scripts.
5. Add CSS Helper: Add touch-action: manipulation to your tooltip link CSS to prevent Safari's default double-tap zoom behavior, which can interfere with your tap logic:

.your-tooltip-link-class {
  touch-action: manipulation;
}

Final Notes #

Don't forget to replace .your-tooltip-link-class and .your-tooltip-container-class with the actual classes from your plugin. Testing on iOS Safari is crucial here—sometimes you might need to tweak the class selectors to match your exact markup.

Hope this fixes your iOS issues and cleans up your code a bit!

内容的提问来源于stack exchange，提问作者gamekopp