在 jQuery Mobile 中启用列表项到可点击区域答案

【问题标题】：Enable list item to clickable area in jQuery Mobile在 jQuery Mobile 中启用列表项到可点击区域
【发布时间】：2011-12-24 05:18:24
【问题描述】：

说明： 以下代码段在 Android/iPhone 中用于 Roundabout carousal。每个 LI 的宽度和高度为 100px x 100px。链接是 LI 的顶部。

  <div data-role="content" data-theme="aa">
    <ul class="roundabout-holder"> 
         <li class="roundabout-moveable-item">
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
         <li class="roundabout-moveable-item"> 
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
         <li class="roundabout-moveable-item"> 
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
         <li class="roundabout-moveable-item"> 
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
         <li class="roundabout-moveable-item"> 
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
    </ul> 
  </div>

CSS

.roundabout-holder {
    list-style: none;
    width: 75%;
    height: 10em;
    margin: 1em auto;
}

.roundabout-moveable-item {
    height: 100px;
    width: 100px;
    border: 1px dotted #999;
    background-color: #f3f3f3;
    font-size: 2em;
    cursor: pointer;
}

当前行为：在项目中，Anchor 仅充当链接（跳转到给定的参考）

预期行为： 当用户点击 LI 时，它应该跳转到给定的参考。

stackoverflow 中的相对资源

How do I make the whole area of a list item in my navigation bar, clickable as a link?

Make A List Item Clickable (HTML/CSS)

尽管解决方案接近我的问题。我需要找到通用解决方案。因为我不能一次或一个地为所有设置填充，因为链接标签可能会不时改变。

添加和测试如下 display:inline-block; 和 padding 然后问题已排序，但应不时更改填充。

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案1】：

一个简单的方法是这样做：

$('li.roundabout-moveable-item').click(function(e) {
    e.preventDefault();
    $(this).find('a').click();
    return false;
});

它将确保单击<li> 中的任意位置会产生与单击包含的<a> 相同的结果。

【讨论】：

使用 e.preventDefault();它能够做到。
这会产生最大堆栈大小命中...无限函数调用。

【解决方案2】：

A. CSS解决方案

li.roundabout-moveable-item a{
    display:block;
    width:100px;
    height:100px;
}

B. jQuery解决方案

$("li.roundabout-moveable-item").click(function(){
    $('a', $(this)).trigger('click');
});

$("li.roundabout-moveable-item a").click(function(event){
  event.stopPropagation();
  // To prevent li-click being trigged
});

【讨论】：

给定的例子是一些不同的 JS 框架，我将其应用于 jQuery Mobile 和 css，所以我仍然没有运气。
给定示例不包含单个 JS 代码。它是纯 HTML 和 CSS。

【解决方案3】：

我相信你可以在css中使用display: block;来设置<a>标签的样式来占据整个<li>。

【讨论】：

它只是添加显示：块。我已经试过了。