Question

我有一个包含列表项的列表，它们在表格中显示为一行（实际上它模仿iPhone上的表格视图），并希望列表中的每一行都可选，因此我可以在用户点击时更改其颜色它还添加了一个监听器来执行某些事件。

   <ul>
   <li>
    <img id = "image" src="image.jpg" />
    <h1 id = "Title">Title</h1>
        etc.
    </li>

我尝试将＃的href属性添加到<li>，但这不起作用。我也试过这个：

      <ul>
       <li>
        <a  href="#" onclick="action();">
        <img id = "image" src="image.jpg" />
        <h1 id = "Title">Title</h1>
            etc.
        </li>

但是，这会将列表项中的每个项目转换为可点击的链接，如何将每个列表项转换为可单击的内容？

Answer 1

Pure JavaScript

第一个答案特别依赖于jQuery，我建议使用它，因为它大大减少了你必须编写的浏览器目标JavaScript的数量（对于移动设备你可以使用jQuery mobile） 。但是，由于您没有在您的问题中声明jQuery，这是在纯JavaScript （避免内联事件处理程序）中执行此操作的最佳方式：

<script type="text/javascript">
  /// wrap all our code in our own scope so to keep things local
  (function(){
    /// store any previous handler on the window.onload
    var previousOnload = window.onload;
    /// create our ready function
    var fullyLoaded = function(){
      /// grab the UL element
      var li, ul = document.getElementById('target_ul');
      /// grab the LI elements
      var lis = ul.getElementsByTagName('li'), i = lis.length;
      /// loop each LI and apply a click handler
      while( i-- ){
        if ( !(li = lis[i]) ){ continue };
        /// internet explorer version
        if ( li.attachEvent ) {
          li.attachEvent('onclick', clickEvent);
        }
        /// pretty much everything else
        else if ( li.addEventListener ) {
          li.addEventListener('click', clickEvent);
        }
      }
    }
    /// create our click event listener
    var clickEvent = function( e ){
      /// fallback support for IE events
      if ( !e ){ e = window.Event };
      /// fallback support for IE .srcElement
      alert( 'Clicked! ' + ( e.target ? e.target : e.srcElement ) );
    }
    /// override/set the window.onload with our own listener for window load
    window.onload = function(){
      /// trigger the our onload function
      fullyLoaded();
      /// once we've triggered our code 'onload', fire anyone elses.
      if ( previousOnload ) {
        previousOnload();
      }
    }
  })();
</script>
<ul id="target_ul">
  <li>test</li>
  <li>test2</li>
</ul>

内联事件处理程序

显然，更简单的方法就是将onclick放在LI元素上，但是应该避免内联事件监听器有多种原因：

您应该始终努力使您的设计/标记与您的代码保持分离 - 这有助于您的工作面向未来，并且意味着可以编辑标记而不必担心破坏脚本。
每个内联事件侦听器只能应用一个函数 - 这意味着将代码与可能在相同元素上运行的其他插件或库一起运行变得更加困难......或甚至扩展代码额外的互动功能。
由于javascript方法受到内联事件侦听器的约束，因此有很多情况会发生内存泄漏。 （在移动设备上，内存使用情况可能是一件值得注意的事情，特别是如果要多次加载页面或有许多内联事件监听器）。
内联事件侦听器需要访问全局函数，这意味着所有事件函数都必须是污染全局命名空间的全局范围的一部分（更多命名与其他代码冲突的机会），这通常会导致难以管理的代码。

结论

必须实现上面长篇大论的纯JavaScript的纯粹复杂性正是我推荐使用jQuery mobile的原因;）尽管它确实带走了它的所有乐趣。

Answer 2

你也可以尝试这个（普通的javascript）

window.onload=function(){
    var lis=document.getElementById('target_ul').getElementsByTagName('li');
    for(i=0;i<lis.length;i++) { 
        lis[i].onclick=myFunction;
    }
}

function myFunction()
{
    alert('This list item contains "'+this.innerHTML+'"');
}

DEMO

Answer 3

您可以使用jQuery执行此操作：

$('ul li').click(function(){
   .......
})

如何使整个列表项可点击？

3 个答案:

Pure JavaScript

内联事件处理程序

结论