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

Question

我有一个包含列表项的列表，这些列表项看起来像表格中的一行(实际上它模仿 iPhone 上的表格 View )，并且希望使列表的每一行都可选择，这样当用户单击时我可以更改其颜色它还添加一个监听器来执行某些事件。

   <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

纯 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 元素上，但是出于多种原因应避免使用内联事件监听器:

1. 您应该始终努力将设计/标记与代码分开 - 这有助于您的工作面向 future ，并且意味着可以编辑标记而不必担心破坏脚本。

2. 每个内联事件监听器只能应用一个函数 - 这意味着将代码与可能对相同元素进行操作的其他插件或库一起运行变得更加困难...甚至使用以下命令扩展代码变得更加困难额外的交互功能。

3. 在许多情况下，由于 javascript 方法通过内联事件监听器绑定(bind)，可能会发生内存泄漏。 (在移动设备上，内存使用情况可能是一件需要注意的大事，特别是当您的页面要加载多次或有许多内联事件监听器时)。

4. 内联事件监听器需要访问全局函数，这意味着所有事件函数都必须属于全局作用域，这会污染全局命名空间(与其他代码发生命名冲突的可能性更大)，这通常也会导致代码管理起来相当困难。

结论

必须实现上面冗长的纯 JavaScript 的复杂性正是我推荐使用 jQuery mobile 的原因;)尽管它确实剥夺了它的所有乐趣。