为啥点击事件不适用于 iOS 上的 li 元素？

Posted 2023-03-15

【中文标题】为啥点击事件不适用于 iOS 上的 li 元素？

【英文标题】：Why wont Click events work for li elements on iOS?为什么点击事件不适用于 iOS 上的 li 元素？

【发布时间】：2011-12-13 15:15:46

【问题描述】：

我有一个使用 PhoneGap（和 html/css/javascript）开发的移动应用程序，应用程序的一部分使用列表，我希望在触摸/单击 li 时触发单击事件。

奇怪的是，它在带有 Ripple 的 Chrome 中测试时运行良好，在 android 和 BlackBerry 上运行良好，但在 ios 中却不行。

您可以在此处试用该应用程序： 安卓——https://market.android.com/details?id=com.viethconsulting.ALIVEapp iOS -- http://itunes.apple.com/us/app/al!ve-volunteer-engagement/id475428488?ls=1&mt=8 黑莓——仍在等待 App World 的批准。

如果您查看事件日历（在菜单中标记为“事件日历”），会发现事件列在表格中并且右侧几乎没有“展开”按钮。

您会注意到在 iOS 版本中触摸/单击行没有任何作用（但如果您单击每一行的标题或展开图标，它将起作用）。

我不知道为什么 iOS 是这种情况，而不是其他平台。有什么想法吗？

以下是我的一些代码示例：

$(function()

    $("li.rssRow").live(
        click: function()
            if($(this).attr("rel") != "loaded") 
                $(this).append('<div><br />Loading Content...<br /></div>');
                $(this).children("div:first").load($(this).children(":first").children(":first").attr("rel")+"&mobile_grab=true #mobile_grab");
                $(this).attr("rel","loaded");
                $(this).children('img:first').rotate(angle:0,animateTo:180);
                $(this).children('img:first').attr("rel","180");
            
            else 
                RotateImage($(this).children('img:first'));
                $(this).children('div:first').slideToggle();
            
        
    );
    // Fix click functionality for calender item contact/map links on iOS devices
    $('#span.c_data').live(
        click: function() 
            window.location = $(this).children("a:first").attr("href");
        
    );
);

以及相关的 HTML：（注意：此内容来自不同的应用程序，但使用相同的代码，但 url 除外，但其行为也完全相同）。

<div id="body_content" class="rssFeed">
  <div class="rssBody">
    <ul>
      <li class="rssRow odd" rel="loaded">
        <h4><a href="#" rel="http://mms.anytownbusinessnetwork.org/Calendar/moreinfo.php?eventid=16646" title="View this feed at Anytown Business Network Calendar RSS Feed" target="_blank">Dec 12, 2011: new event</a></h4>
        <img src="assets/img/expand_result.gif" class="expand" rel="0" style="-webkit-transform: rotate(0deg); ">
        <p></p>
        <div style="display: none; ">
          <div id="mobile_grab" style="display:none;">
            <div class="c_row">
              <span class="c_label">Event Name:</span>
              <span class="c_data">new event</span>
            </div>
            <div class="c_row">
              <span class="c_label">Description:</span>
              <span class="c_data"></span>
            </div>
            <div class="c_row">
              <span class="c_label">Event Date:</span>
              <span class="c_data">12-12-11<br></span>
            </div>
            <div class="c_row">
            <span class="c_label">Event Time:</span>
            <span class="c_data"></span>
            </div>
            <div class="c_row">
              <span class="c_label">Location:</span>
              <span class="c_data">
                Grand Ledge Opera House<br>121 S. Bridge Street<br>Grand Ledge, MI  48837<br><br>
                <a target="_blank" href="http://maps.google.com/maps?q=121+S.+Bridge+Street,Grand+Ledge,MI%2048837%20us">click here for Google Maps</a>
              </span>
            </div>
            <div class="c_row">
              <span class="c_label">Contact Person:</span>
              <span class="c_data"></span>
            </div>
            <div class="c_row">
              <span class="c_label">Event Registration:</span>
              <span class="c_data">
                <a target="_blank" href="http://mms.anytownbusinessnetwork.org/members/evr/regmenu.php?orgcode=BUSI">Click here to register for events...</a><br>
              </span>
            </div>
            <div class="c_row" style="display:none;">
              <span class="c_label">Outlook/vCalendar:</span>
              <span class="c_data">click on the date(s) to add to your calendar:<br><a href="vcalendar.php?cdid=46852">12-12-11</a><br></span>
            </div>  
            <div class="c_row" style="display:none;">
              <span class="c_label">Email Reminder:</span>
              <span class="c_data">
                <a href="event_reminder.php?eid=20345979&amp;org_id=BUSI">setup an email reminder for this event</a>
              </span>
            </div>
          </div>
        </div>
      </li>
      <li class="rssRow even">
        <h4><a href="#" rel="http://mms.anytownbusinessnetwork.org/Calendar/moreinfo.php?eventid=16357" title="View this feed at Anytown Business Network Calendar RSS Feed" target="_blank">Jan 30, 2012: new event</a></h4>
        <img src="assets/img/expand_result.gif" class="expand" rel="0">
        <p></p>
      </li>
    </ul>
  </div>
</div>

提前感谢您提供的任何帮助。

另外，这可能不是最有效的方法，所以我也欢迎改进 javascript 的建议。不过，我对 HTML 无能为力。

【参考方案1】：

我建议将您的整个 LI 内容包装到 n A 元素中，并在那里管理您的点击事件 - JQuery Mobile 也这样做 - 通过使用样式，您可以确保所有内容都按顺序呈现，并且它可以在任何浏览器中工作（移动/桌面也是如此），因为它只是一个标准的 A 标签......

例如

<li class="rssRow odd" rel="loaded">
    <a href="#" rel="http://mms.anytownbusinessnetwork.org/Calendar/moreinfo.php?eventid=16646" title="View this feed at Anytown Business Network Calendar RSS Feed" target="_blank"><h4>Dec 12, 2011: new event</h4>
       <img src="assets/img/expand_result.gif" class="expand" rel="0" style="-webkit-transform: rotate(0deg); ">
        ......
     </a>
</li>

希望这会有所帮助！

【讨论】：

我曾考虑过这一点，但这不会干扰其他 A 标签（LI 标签的子代和孙代）吗？我相信技术上嵌套的锚点/链接在 W3C 中是无效的 HTML。另外，我仍然不明白为什么 click/onclick 事件在 iOS 上不起作用，但在其他所有东西上都起作用......

我会将您的答案标记为正确答案，因为您至少尝试了一个答案。我最终重新设计了 JavaScript，这样它就没有使用“live”，而是显然它没有按照我想要的方式工作。我认为您的答案足够接近，但我认为嵌套 A（锚/链接）标签不是一个好方法，因为我需要在 LI 标签内使用 A 标签，所以我需要一个不同的解决方案。再次感谢。

【参考方案2】：

cursor:pointer; 

将此样式添加到 li 标签中。