如何使 div 可点击？答案

【问题标题】：How to make div clickable?如何使 div 可点击？
【发布时间】：2010-05-21 03:25:09
【问题描述】：

我想让这个 div 可点击，并希望在 <a> 内部使用相同的 href，并且还希望将链接保留在 <a> 内部（所以如果 JS 被禁用，那么链接将可以访问）。

<div id="example">

<p> some text </p>

<img src="example.jpg />

<a href="http://stackoverflow.com"> link </link>

</div>

我的意思是我需要这样。

<div id="example" href="http://stackoverflow.com">

<p> some text </p>

<img src="example.jpg />

<a href="http://stackoverflow.com"> link </link>

</div>

【问题讨论】：

可能重复：stackoverflow.com/questions/180211/…
@AlastairPitts 相似但不一样
@Alastair：这不是重复的。
很公平。我粗略地看了一眼。

标签： javascript jquery css xhtml

【解决方案1】：

应该这样做

$('#example').click(function() {
  window.location.href = $('a', this).attr('href');
});

【讨论】：

此外，在#example div 上使用cursor: pointer; css 样式会给用户反馈，他们可以点击该div。
@Josiah +1 感谢您的可用性。这个技巧的唯一缺点是它不会在鼠标悬停在div 上时在状态栏中显示链接状态。
@Slaks - return false; 是什么意思？我应该在代码中添加这个吗？
@SLaks - 但在哪里？你的意思是这样$('#example').click(function() { window.location.href = $('a', this).attr('href'); return false; });添加这个有什么好处？
@Ben Rowe - 如何为多个div 执行此操作？我的意思是如何在这里添加更多div $('#example')？我可以添加更多div 像这样$('#example, #example2, #example3 ')

【解决方案2】：

我还不能回复上面的对话，因为我是新来的，但我只想说你不需要从这个功能return false。这样做是为了防止事件的默认行为发生（在单击div 的情况下什么都不是）并防止事件传播到 DOM 层次结构中的下一个元素。

对于这种情况，这两种方法都不太可能是必需的。此外，如果您确实需要这些行为，您可以像这样单独获取它们并且更清晰：

// note that the function will be passed an event object as
// its first argument.
$('#example').click(function(event) { 
  event.preventDefault(); // the first effect
  event.stopPropagation(); // the second

  window.location.href = $('a', this).attr('href');
});

同样，在这种情况下，我认为这两种方法都没有必要，但了解它们的工作原理很重要，因为您会经常需要其中一种或两种方法。

【讨论】：

除非用户点击<a>。
正确，但是这里的事件处理程序绑定到<div>，而不是<a>，所以return false;不会及时生效，以防止<a>上的默认值。实际上，在 jQuery 中总是如此，据我所知，它总是使用冒泡模型，但在正常的 DOM 脚本中，<div> 的处理程序可能会在 W3C 兼容的浏览器中使用捕获式事件传播时首先触发.无论如何，对于这种特定情况，它不会有太大的不同。

【解决方案3】：

<html>  
  <body>
    <div onclick="window.location.href = this.getElementsByTagName('a')[0].href;">
      <p>some text</p>      
      <a href="http://www.google.co.in/">link</a>
    </div>
  </body>
</html>

【讨论】：

很好的解决方案，虽然它需要改进以防在相关元素之前还有另一个 a 元素；身份证应该可以。 jQuery 和它的buggy, inefficient attr()-based approach 无法击败它。你应该跳过href LHS，因为它被污染了。 “不引人注目”（被误导）：document.getElementById("example").onclick = function() { window.location = this.getElementsByTagName('a')[0].href; }; 但通常你有一个包装器会检查并尝试addEventListener() 或on… 之一，比如我的jsx.dom.addEventListener()（URI 太长，抱歉）。

【解决方案4】：

以上答案我都接受了。通常你可以做出同样的甚至更好的 css 对“div”的影响比对“a”的影响。并且您可以添加 js 函数来显示单击事件发生时的 css 更改。可能是这样：DIV.onclick = function(){这里改变目标dom对象css}。那么当事件发生时，你就会看到效果。如果您想将 href 更改为另一个。像location.href="http://www.target.com"这样写js；它会为你工作。

【讨论】：