HTML表格布局，如何实现单击一行触发一个事件，单击其中某列触发另一个事件

如下图所示为一个四列的表格布局，要实现单击除最后一列的任何一列触发一个事件，而单击最后一列中的任意一个按钮又触发各自的事件，这个单纯使用HTML和表格布局是无法做到的。不过使用JavaScript的事件对象的方法event.stopPropagation()可以轻松实现此功能。
这里写图片描述

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
  <div class="" style="">
    <div class="card card-primary" style="clear: right;">
      <div style="">
        <div class="card-header">
          <h3 class="card-title">
            <i class="zmdi zmdi-graduation-cap"></i> My Content</h3>
        </div>
        <table class="table table-no-border table-striped" id="file-table">
          <thead>
            <tr>
              <th>#</th>
              <th>Filename</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody id="tbody">
            <tr id="153" data-filename="cccaa啊啊啊啊啊啊啊.jpg" data-ftype="" onclick="rowClick(this)">
              <td>1</td>
              <td id="fname">cccaa啊啊啊啊啊啊啊.jpg</td>
              <td>2018-08-27 10:10:39</td>
              <td>
                <!-- 删除文件的按钮 -->
                <div style="float: left; margin:0 5px; font-size: 20px;" id="fdelete"><a href="javascript:void(0)" data-toggle="modal" data-target="#file-delete"><i class="fa fa-trash"></i></a></div>
                <!-- 编辑名字的按钮 -->
                <div style="float: left; margin:0 5px; font-size: 20px;" id="upholder"><a href="javascript:void(0)" data-toggle="modal" data-target="#edit-name"><i class="fa fa-edit" id="edtname-btn"></i></a></div>
              </td>
            </tr>
            <tr id="153" data-filename="cccaa啊啊啊啊啊啊啊.jpg" data-ftype="" onclick="rowClick(this)">
              <td>1</td>
              <td id="fname">cccaa啊啊啊啊啊啊啊.jpg</td>
              <td>2018-08-27 10:10:39</td>
              <td>
                <!-- 删除文件的按钮 -->
                <div style="float: left; margin:0 5px; font-size: 20px;" id="fdelete"><a href="javascript:void(0)" data-toggle="modal" data-target="#file-delete"><i class="fa fa-trash"></i></a></div>
                <!-- 编辑名字的按钮 -->
                <div style="float: left; margin:0 5px; font-size: 20px;" id="upholder"><a href="javascript:void(0)" data-toggle="modal" data-target="#edit-name"><i class="fa fa-edit" id="edtname-btn"></i></a></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    var eventUtil = {
      getEvent: function (event) {
        return event ? event : window.event;
      },

      stopPropagation: function (event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    }

    var fdel = document.getElementById('fdelete');
    fdel.onclick = function (event) {
      alert('you clicked delete file');
      event = eventUtil.getEvent(event);
      eventUtil.stopPropagation(event);
    }

    var fnedit = document.getElementById('upholder');
    fnedit.onclick = function (event) {
      alert('you clicked edit name');
      event = eventUtil.getEvent(event);
      eventUtil.stopPropagation(event);
    }

    function rowClick (e) {
      alert('you clicked row');
      window.open('http://localhost:8000/1/15356136951/15356136951.pdf');
    }
  </script>
</body>
</html>

要理解这段代码，首先需要理解事件流。事件流描述的是从页面中接收事件的顺序,IE的事件流是事件冒泡流，而Netscape communicator的事件流是事件捕获流。

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。

Netscape comunicator团队提出的另一种事件流叫做事件捕获。事件捕获的思想是从不太具体的节点更早接收到事件，而最具体的节点应该最后接收到事件。

而stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。IE中的cancelBubble属性与DOM中的stopPropagation()方法作用相同，都是用来停止事件冒泡的。由于IE不支持事件捕获，因而只能取消事件冒泡；但stopPropagation()可以同时取消事件捕获和冒泡。

HTML表格布局，如何实现单击一行触发一个事件，单击其中某列触发另一个事件

猜你喜欢