javascript - 如何制作带有文本可选子元素的 元素？

Question

我继承了一些标记，其中一系列顶级 <a>每个元素都包含一组 <span>元素，并使用 CSS，将它们呈现为列表中的可点击 block ，如下所示:

.list {
  display: inline-flex;
  flex-flow: column nowrap;
  font: 14px Arial;
}
  .list a {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    border: 1px solid #CCC;
    border-bottom: none;
    background: #FFF;
    padding: 4px 10px;
    text-decoration: none;
    color: #000;
  }
    .list a:last-child {
      border-bottom: 1px solid #CCC;
    }
    .list a:hover {
      background: #CDE;
    }

    .list a .name {
      font-weight: bold;
    }
    .list a .secondary {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      color: #678;
      font-size: 85%;
      padding-top: 2px;
    }
    
    .list a .address {
      padding-right: 16px;
      padding-left: 8px;
    }
    .list a .company-id {
      color: #B88;
      cursor: text;
      padding-left: 4px;
      padding-right: 4px;
      margin-right: -4px;
    }

<div class="list">
    <a href="/link/to/company/10101">
        <span class="name">Alice Jones &amp; Co.</span>
        <span class="secondary">
            <span class="address">55 Oak Street, Anytown 15151</span>
            <span class="company-id">#10101</span>
        </span>
    </a>
    <a href="/link/to/company/12345">
        <span class="name">John Smith Inc.</span>
        <span class="secondary">
            <span class="address">123 Main Street, Anytown 15151</span>
            <span class="company-id">#12345</span>
        </span>
    </a>
    <a href="/link/to/company/20123">
        <span class="name">Bob Johnson LLC</span>
        <span class="secondary">
            <span class="address">17 Spruce Street, Anytown 15152</span>
            <span class="company-id">#20123</span>
        </span>
    </a>
</div>

请求

前几天，一位产品负责人问我是否可以让公司 ID 不可点击——我们的用户希望能够选择 ID 的文本进行复制和粘贴。好吧，我想:转动每个 <a>元素到 <li>无论如何都应该这样，添加一点 JavaScript 来跟踪点击链接，并忽略对公司 ID 的点击，然后就完成了。

然后我了解到还有另一个用户需求—— <a>元素还必须是可中键单击或 Ctrl 键单击才能在新选项卡中打开它们。我打算调整 JavaScript 以调用 window.open()如果 Ctrl 键或鼠标中键按下，但似乎广告拦截器和浏览器弹出窗口拦截器妨碍了它的可靠工作: <a>元素必须是真实的 <a>元素，并且它的事件必须或多或少地保持不变。但这意味着 <a>将捕获其内容上的每个冒泡事件，包括我不希望它触摸的事件，例如公司 ID 上的单击并拖动(和双击)事件。

而且由于列表具有灵活的布局，我不能将公司 ID 元素放在 <a> 之外。元素，然后使用 position 使其成为同一 block 的一部分或 margin技巧:间距不起作用，因为 ID 的长度变化很大(从 1 到 129370-5486 )。

tl;博士:我需要一个子元素存在于 <a> 中用于布局的元素——但它需要存在于相同的行为元素之外。

要求

对于有效的解决方案，我必须满足以下要求:

完整的<a>元素必须作为链接可单击，但公司 ID <span> 除外.

完整的<a>除了公司 ID <span> 之外，可以中键单击元素以在新选项卡中打开它.

用户必须能够单击并拖动公司 ID <span>选择并复制其文本。

用户必须能够双击公司 ID <span>选择并复制其文本。

布局必须灵活，允许任意长度的文本跨度，并折叠到最窄的整体宽度。

该解决方案必须适用于现代常青浏览器(即 Chrome、Firefox、Edge — 不需要旧的 IE 兼容性!)。

除此之外，没有任何限制:依赖，无依赖，添加/调整 CSS，添加一些 JS，更改标记——只要满足这六个要点，你就可以做任何你想做的事情。

我的最佳解决方案

到目前为止，我已经尝试了很多 JavaScript 事件捕获技巧，其中大部分都失败了。我发现的最佳工作解决方案根本不涉及 JS:我在标记中包含公司 ID 两次——一次在 <a> 中。与 visibility:hidden出于布局目的，然后在 </a> 之后的标记中再次出现, 带有 position:relative含 <li>它周围的元素，和 position:absolute / bottom: / right:在可见的、可选择的 <span> .但似乎应该有一种不涉及改变标记的更好方法；如果产品负责人想要在每个框中有更多的文本，或者稍微不同的布局，我的解决方案不太可能很好地适应这些变化。

那么你有什么比我更好的想法来在一个可点击的 <a> 中提取正常的、可选择的文本元素吗？元素父？

Answer 1

Heydon Pickering 在 inclusive card design 上写了一篇文章它讨论了如何处理卡片组件内的可选文本，其中整个卡片都是可点击的。

对您有用的解决方案之一是更改每个 <a>元素到 <li>元素，但随后添加 <a>仅在公司名称周围标记。然后你可以在 anchor 标签上添加一个伪元素，扩展父级的全宽/高度 <li> .最后添加position: relative到 id 以将其置于 anchors 伪元素之上，这样它就不会激活链接。

.list {
  display: inline-flex;
  flex-flow: column nowrap;
  font: 14px Arial;
  margin: 0;
  padding: 0;
}
  .list li {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    border: 1px solid #CCC;
    border-bottom: none;
    background: #FFF;
    padding: 4px 10px;
    text-decoration: none;
    color: #000;
    position: relative;
  }
    .list a::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  
    .list li:last-child {
      border-bottom: 1px solid #CCC;
    }
    .list li:hover {
      background: #CDE;
    }

    .list li .name {
      font-weight: bold;
    }
    .list li .secondary {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      color: #678;
      font-size: 85%;
      padding-top: 2px;
    }
    
    .list li .address {
      padding-right: 16px;
      padding-left: 8px;
    }
    .list li .company-id {
      color: #B88;
      cursor: text;
      padding-left: 4px;
      padding-right: 4px;
      margin-right: -4px;
      position: relative;
    }

<ul class="list">
    <li>
        <a href="/link/to/company/10101" class="name">Alice Jones &amp; Co.</a>
        <span class="secondary">
            <span class="address">55 Oak Street, Anytown 15151</span>
            <span class="company-id">#10101</span>
        </span>
    </li>
    <li>
      <a href="/link/to/company/12345" class="name">John Smith Inc.</a>
      <span class="secondary">
          <span class="address">123 Main Street, Anytown 15151</span>
          <span class="company-id">#12345</span>
      </span>
    </li>
    <li>
      <a href="/link/to/company/20123" class="name">Bob Johnson LLC</a>
      <span class="secondary">
          <span class="address">17 Spruce Street, Anytown 15152</span>
          <span class="company-id">#20123</span>
      </span>
    </li>
</ul>