使 div 可点击并跟随子锚元素

Question

我目前正在努力使 div 可点击，点击后必须跟随 link。这是我的 HTML:

<div class="product">
 <form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
  <div class="image">
   <a href="/shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a>
  </div>
  <div class="prodinfo">
   /* Lots of text here */
   <div class="listprodbuy">
    <input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
    <input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
   </div>
  </div>
 </form>
</div>

我的想法是，当我单击带有 class "product" 的 div 元素时，它将跟随包含在 div 中的 link class "image"。但是当用 class "listprodbuy" 点击 div 时，它不会跟随那个 link。到目前为止，这是我的 Jquery：

$(".product").click(function(){
  window.location = $(this).find("a").attr("href"); 
  return false;
});
$("div.listprodbuy").click(function(e){
  e.stopPropagation();
});

点击主 div 时，绝对没有任何反应，我认为这是因为 Jquery 没有准确定位 link，因为它不是直接子项div 的元素。我将如何着手准确指定它应该遵循哪个元素？

虽然我很乐意将整个 div 包裹在一个锚点中，但这是不可能的，因为我的 CMS (DanDomain) 不允许我访问和编辑上面的 HTML.

Jsfiddle

Answer 1

window.location 应该设置为绝对路径而不是相对路径。由于您发现锚标记的 href 为 $(this).find("a").attr("href")，它将为您提供相对路径。只需将 html 从 <a href="/shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a> 更改为 <a href="./shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a> 即可获得绝对路径。

使用 e.preventDefault(); 和 e.stopPropagation(); 来避免回发。

完整代码：

$(".product").click(function(){
  window.location = $(this).find("a").attr("href"); 
  return false;
});
$("div.listprodbuy").click(function(e){
  e.preventDefault();
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
   <form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
    <div class="image">
     <a href="./shop/boa-elektrisk-luftpumpe-750p.html" title="Boa elektrisk luftpumpe"></a>
    </div>
    <div class="prodinfo">
     /* Lots of text here */
     <div class="listprodbuy">
      <input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
      <input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
     </div>
    </div>
   </form>
  </div>

使 div 可点击并跟随子锚元素

Making a div clickable and follow child anchor element

html

javascript

anchor

jquery

stoppropagation