菜鸟教程小白 发表于 2022-12-11 20:43:41

javascript - 为什么点击事件不适用于 iOS 上的 li 元素？


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

<p>奇怪的是，它在带有 Ripple 的 Chrome 中运行良好，在 Android 和 BlackBerry 上运行良好，但在 iOS 中却不行。</p>

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

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

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

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

<p>以下是我的一些代码示例:</p>

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

<p>以及相关的 HTML:(注意:此内容来自不同的应用程序，但使用相同的代码，但 url 除外，但其行为也完全相同)。</p>

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

<p>提前感谢您提供的任何帮助。</p>

<p>另外，这可能不是最有效的方法，所以我也欢迎改进 javascript 的建议。不过，我对 HTML 无能为力。</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>我建议将您的整个 LI 内容包装到 n A 元素中，并在那里管理您的点击事件 - JQuery Mobile 也这样做 - 通过使用样式，您可以确保所有内容都按顺序呈现，并且它可以在任何浏览器中工作(移动/桌面也是如此)，因为它只是一个标准的 A 标签......</p>

<p>例如</p>

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

<p>希望这会有所帮助!</p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 为什么点击事件不适用于 iOS 上的 li 元素？，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/8491551/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/8491551/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - 为什么点击事件不适用于 iOS 上的 li 元素？