代码之家 › 专栏 › 技术社区 › Jacob

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

stoppropagation anchor html jquery javascript

Jacob · 技术社区 · 7 年前

我目前正在努力使一个div可点击,当点击它必须遵循一个链接。这是我的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>

其思想是,当我单击带有类“product”的div元素时,它将跟随包含在带有类“image”的div中的链接。但是当用类“listprodbuy”单击div时,它不会跟随该链接。这是我目前为止的Jquery:

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

Jsfiddle

1 回复 | 直到 7 年前

Ayaz 7 年前

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>