javascript - 容器重定向到 URL，但嵌套 anchor 转到与容器不同的 URL

Question

因此，我在 Shopify 中有一个模板，如果单击该模板，我会尝试将用户重定向到信息页面。这非常简单，只是该容器中有两个嵌套链接。 “了解更多”会转到容器应该转到的页面，但“立即购买”按钮不会。它需要转到立即购买页面。

我使用 jQuery 来完成此任务，因为将整个内容嵌套在 anchor 标记中是行不通的。

到目前为止我拥有的jquery:

$(document).ready(function() {
        $(".cross-sell-img-container").click(
          function() { window.location = $(this).find(".spec").attr("href");
          return false;
        });
        $(".purchase").click(function() {
          window.location = $(this).find(".purchase").attr("href");
          return false;
        });  
        //$(".cross-sell-img-container").click(function() {
          //window.location = $(this).find("a").attr("href");
          //return false;
        //});
      });

如果我单击任意位置，则在 route 返回未定义。

模板如下所示:

<div class="cross-sell-img-container">

    <div class="detailed-cross-sell">

      <a href="{{ product.url }}">
        <p class="detailed-cross-sell-title">{{ "The " | append: product.title }}</p>
      </a>

      <div class="detailed-cross-sell-image-container">
        {{ product.metafields.custom_fields["spec_preview_image"] | replace: '<img', '<img class="detailed-cross-sell-image"' }}
      </div>

      <div class="button-container">
        {% assign shop_url = product.metafields.custom_fields["domehastore.com_link"] %}
        <a href="{% if shop_url %}{{ shop_url }}{% else %}{{ product.url }}#purchasing-area{% endif %}" class="button purchase" target="_blank">
          <span class="add-to-cart__text">Buy Now</span>
        </a>
        <!-- | replace: "/products", "/pages" | append: "-specifications" FP: add after product.url to make go to specs -->
        {% assign link_name = product.url %}
        <a class="button spec" href="{{ link_name }}">
          Learn More
        </a>
      </div>

    </div>

    <div class="preview-cross-sell">
      <a class="preview-image" href="{{ product.url }}">
        {{ product.metafields.custom_fields.cross_sell_preview_image }}
      </a>
    </div>

  </div>

我如何完成我想做的事情？

谢谢!

Answer 1

防止默认并停止 <a> 上的传播点击

$(".purchase").click(function(e) {
    e.preventDefault()
    e.stopPropagation();
    window.location = $(this).find(".purchase").attr("href");    
});  

或者对两者使用一个处理程序并检查事件的目标

$(".cross-sell-img-container").click(function(event) {
  var $link = $(event.target).closest('a.purchase');
  if ($link.length) {
    window.location = $link.attr('href');
  } else {
    window.location = $(this).find(".spec").attr("href");
  }

});