使用jQuery Mobile使列表项成为可点击区域

Question

描述： 以下代码片段用于Android/iPhone的Roundabout旋转木马。每个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;
}

当前行为： 在项目中，锚点只作为链接行为（跳转到给定的参考文献）。

期望行为： 当用户单击LI时，它应该跳转到给定的参考文献。

来自stackoverflow的相关资源

如何使导航栏中列表项的整个区域都可以作为链接点击？

使列表项可点击（HTML/CSS）

即使解决方案接近我的问题，我仍然需要找到通用解决方案。因为我不能一次性或逐个设置所有填充，因为链接标签可能随时更改。

已添加并测试如下 display:inline-block; 和 padding 然后问题就解决了，但是填充有时需要更改。

- Sameera Thilakasiri

Answer 1

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

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

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

- Zut

---

通过 e.preventDefault();，它能够实现。 - Sameera Thilakasiri

这会导致最大堆栈大小达到上限...无限的函数调用。 - Halsafar

Answer 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
});  

- Moe Sweet

---

给定的例子是使用某些不同的JS框架，我正在尝试将其应用于jQuery Mobile和CSS，但仍然没有成功。 - Sameera Thilakasiri

给定的示例不包含任何JS代码。它是纯HTML和CSS。 - Moe Sweet

Answer 3

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

- kevinmicke

---

只是添加 display:block。我已经尝试过了。 - Sameera Thilakasiri