如何使整个列表项都可以点击

How does one make the whole of a list item clickable?

本文关键字：都可以 列表 何使整      更新时间：2023-09-26

我有一个包含列表项的列表，这些列表项看起来像表中的一行（实际上它模仿了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>

但这会将列表项目中的每个单独项目变成一个可点击的链接，我如何将每个列表项目变成可点击的整体？

纯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. 你应该始终努力将你的设计/标记与代码分开——这有助于你的工作经得起未来的考验，也意味着可以编辑标记，而不用担心破坏脚本。

  2. 每个内联事件侦听器只能应用一个函数，这意味着与可能在相同元素上运行的其他插件或库一起运行代码会变得更加困难。。。或者甚至用额外的交互功能来扩展代码。

  3. 在许多情况下，由于javascript方法通过内联事件侦听器绑定，可能会发生内存泄漏（在手机上，内存使用可能是一件需要注意的大事，尤其是当你的页面要加载多次或有许多内联事件侦听器时）。

  4. 内联事件侦听器需要访问全局函数，这意味着您的所有事件函数都必须是全局范围的一部分，这会污染全局命名空间（与其他代码发生命名冲突的可能性更大），这通常也会导致代码管理非常困难。

结论

必须实现上面冗长的纯JavaScript的复杂性正是我建议使用jQuery mobile的原因；）尽管它确实带走了所有的乐趣。

您也可以尝试这个（纯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+'"');
}

演示。

您可以使用jQuery:来完成此操作

$('ul li').click(function(){
   .......
})
相关文章：