如何点击<li>元素而非<option>实现音频播放（JavaScript）

Hey there! I’ve dealt with this exact mobile-specific quirk before—swapping from <select> to <ul>/<li> for a scrollable track list, only to hit click event issues on iOS. Let’s walk through reliable solutions to get your changeTrack function firing properly:

1. Quick Fix: Inline onclick Binding #

If your track list is small and straightforward, you can add the click handler directly to each <li> element. Just make sure your changeTrack function is in the global scope (not tucked inside a closure that’s inaccessible).

Example HTML: #

<ul class="track-list">
  <li onclick="changeTrack('track-1.mp3')">Track 1: Coastal Breeze</li>
  <li onclick="changeTrack('track-2.mp3')">Track 2: Midnight Jazz</li>
  <li onclick="changeTrack('track-3.mp3')">Track 3: Rainy Day Lo-fi</li>
</ul>

<!-- Your audio element -->
<audio id="audio-player" controls></audio>

Example changeTrack Function: #

function changeTrack(trackSource) {
  const audioPlayer = document.getElementById('audio-player');
  if (!audioPlayer) return;
  
  audioPlayer.src = trackSource;
  // Handle iOS playback restrictions (user interaction required)
  audioPlayer.play().catch(error => {
    console.log("Playback blocked—user needs to interact first:", error);
    // Optional: Show a prompt to tap play manually
  });
}

2. Better Practice: Event Delegation (Recommended) #

For larger track lists or cleaner code, use event delegation. This binds a single click handler to the parent <ul> instead of every <li>, which is more efficient and avoids DOM update issues.

Example HTML (with data attributes): #

<ul class="track-list">
  <li data-track-src="track-1.mp3">Track 1: Coastal Breeze</li>
  <li data-track-src="track-2.mp3">Track 2: Midnight Jazz</li>
  <li data-track-src="track-3.mp3">Track 3: Rainy Day Lo-fi</li>
</ul>

<audio id="audio-player" controls></audio>

Example JavaScript: #

// Wait for the DOM to fully load before binding events
document.addEventListener('DOMContentLoaded', () => {
  const trackList = document.querySelector('.track-list');
  
  trackList.addEventListener('click', (event) => {
    // Make sure we're actually clicking an <li> element
    if (event.target.tagName === 'LI') {
      const trackSource = event.target.dataset.trackSrc;
      changeTrack(trackSource);
    }
  });
});

function changeTrack(trackSource) {
  const audioPlayer = document.getElementById('audio-player');
  if (!audioPlayer) return;
  
  audioPlayer.src = trackSource;
  audioPlayer.play().catch(error => {
    console.log("Playback blocked:", error);
  });
}

3. Fixing iOS-Specific Click Issues #

Sometimes iOS Safari has odd behavior with click events. Try these tweaks if the above methods don’t work:

• Ensure clickable area size: Add padding to your <li> elements so they’re not too small (iOS can ignore clicks on tiny elements). Example CSS:

  .track-list li {
    padding: 12px 16px;
    cursor: pointer; /* Visual cue it's clickable */
  }
  

• Disable tap highlight (optional): This won’t fix clicks, but removes the default gray highlight on iOS:

  .track-list li {
    -webkit-tap-highlight-color: transparent;
  }
  

• Fallback to touchstart (if needed): If click events still don’t fire, listen for touchstart (but prevent double-triggering with a debounce):

  let touchHandled = false;
  
  trackList.addEventListener('touchstart', (event) => {
    if (!touchHandled && event.target.tagName === 'LI') {
      touchHandled = true;
      const trackSource = event.target.dataset.trackSrc;
      changeTrack(trackSource);
      // Reset after 300ms to avoid blocking future clicks
      setTimeout(() => touchHandled = false, 300);
    }
  });
  

4. Debugging Tips #

• Open Safari’s Web Inspector on your Mac and connect your iPhone to check for console errors (this will tell you if changeTrack is undefined or if the audio element can’t be found).
• Confirm your changeTrack function isn’t wrapped in a local scope (e.g., inside another function without being exported globally).

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