OGeek|极客世界-中国程序员成长平台

标题: javascript - 为什么点击事件不适用于 iOS 上的 li 元素？ [打印本页]

作者: 菜鸟教程小白 时间: 2022-12-11 20:43
标题: javascript - 为什么点击事件不适用于 iOS 上的 li 元素？

我有一个使用 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 无能为力。

Best Answer-推荐答案

我建议将您的整个 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>

希望这会有所帮助!

关于javascript - 为什么点击事件不适用于 iOS 上的 li 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8491551/

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/) Powered by Discuz! X3.4