通过在其中定位 <a> 使整张卡片可点击答案

【问题标题】：Make entire card clickable by targeting <a> inside of it通过在其中定位 <a> 使整张卡片可点击
【发布时间】：2022-10-14 09:30:54
【问题描述】：

我有一些卡片，里面有图片、文字和链接。在我的情况下，用锚标签包裹卡片是不可能的。是否可以定位卡片中的锚标记，然后使用 jquery 使整个卡片可点击以转到该链接？

理想状态：当您单击卡片上的任意位置时，将触发链接并将用户带到该链接。

<div class="todays-news">
    <div class="container">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <div class="card">
                  <img src="images/home/home-image.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
            <div class="item">
                <div class="card">
                  <img src="images/home/home-image-2.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

我很好奇为什么不能让整张卡都成为锚……？
如果您想点击卡片上的任意位置，请将整个卡片设为链接，即<a class="card">...</a>。不要使用 JavaScript，它会在很多方面破坏用户的浏览器和 Internet 的基本合同：用户无法预览链接以查看链接的位置，他们无法导航到链接或单击链接键盘或辅助设备，它们无法右键单击/中键单击以在新选项卡中打开等等。这是一种糟糕的做法。

标签： javascript html jquery

【解决方案1】：

是的，你可以用 JavaScript 做到这一点，但如果你能解决无法使卡片成为锚点的问题，那就更好了。没有理由不能将div 放入a element，a 的内容模型是transparent。

但如果你不能：

$(document).on("click", ".card", function(event) {
    const $this = $(this);
    // Don't interfere with a click actually on the anchor
    // (that way, the user can still right-click it and
    // use the browser-supplied menu for oew in new tab,
    // shift click, etc.)
    if ($this.find($(event.target).closest("a")[0]).length === 0) {
        // Not on the anchor, do it
        event.preventDefault();
        $this.find("a")[0].click();
    }
});

请注意，您必须在 DOM 元素上调用 click，而不是 jQuery 对象。如果您在 jQuery 对象上调用它，它不会触发默认操作。

【讨论】：

@rocket129083 - 不是真的，我会保留不会干扰它的代码，以防您更改样式/HTML。

【解决方案2】：

只需在div 上使用onclick 处理程序：

<div class="todays-news">
    <div class="container">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <div class="card" onclick="this.querySelector('a').click(); return true;">
                  <img src="images/home/home-image.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
            <div class="item" onclick="this.querySelector('a').click(); return true;">
                <div class="card">
                  <img src="images/home/home-image-2.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.org/">Continue Reading</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

该链接不会显示给用户，它将使用 css 显示为“display:none”。不确定这是否会对这个答案产生影响......感谢您的帮助。

【解决方案3】：

为卡片添加点击处理程序，并让它在锚点上执行点击：

$(".card").click(function() {
  $(this).find("a")[0].click();
});

【讨论】：

不，没关系，因为用户不需要点击链接。
@T.J.Crowder 我不确定这是真的（.trigger() 的文档说您必须使用 .triggerHandler() 才能不触发本机操作），但我已经更改了代码以在 DOM 元素上调用它。
@Barmar - 我在发表评论之前对其进行了测试。（我也刚刚写了.find("a").click()，然后在它不起作用时被提醒了这个问题。）

【解决方案4】：

您可以使用<a> 包装块元素。它是有效的 HTML5 并呈现您的卡片可点击。但是，您可能需要调整此块内文本的 css 规则。

编辑：由于在您的情况下这是不可能的，您能具体说明原因吗？

<div class="todays-news">
<div class="container">
    <div class="owl-carousel owl-theme">
        <a class="item" href="https://www.example.com/">
            <div class="card">
              <img src="images/home/home-image.png" />
              <div class="card-body">
                <strong>This is a title</strong>
                <p>This is a paragraph.</p>
                <a>Continue Reading</a>  <!-- unsure about the correct tag here -->
              </div>
            </div>
        </a>
        <a class="item" href="https://www.example.com/">
            <div class="card">
              <img src="images/home/home-image-2.png" />
              <div class="card-body">
                <strong>This is a title</strong>
                <p>This is a paragraph.</p>
                <a>Continue Reading</a> <!-- unsure about the correct tag here -->
              </div>
            </div>
        </a>
    </div>
</div>
</div>

【讨论】：

是的你可以。但是OP说这是“......在[他们]的情况下是不可能的。”发布一个忽略部分问题的答案并不是很好。
啊!对不起，我应该更仔细地阅读

【解决方案5】：

这可以通过 css 实现，不需要 javascript。

.item {
  position: relative;
}

.item a::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

您要使其可点击的元素将获得position: relative。这会创建一个新的收容块。然后我们在链接中添加一个before 伪类。将其绝对定位并将其拉伸到整个收容块上。

https://play.tailwindcss.com/q0Pje5H2Br

【讨论】：