如何从 DIV 重定向并绕过子锚点 href答案

【问题标题】：How to redirect from DIV and bypass child anchor href如何从 DIV 重定向并绕过子锚点 href
【发布时间】：2013-06-01 17:33:56
【问题描述】：

下面的代码我需要你的帮助。我想将 onclick 事件添加到整个 DIV 以重定向到 url，但我无法绕过 DIV 内的子锚点中包含的 href。：

即（目标是点击图片或文本的任意位置重定向到 google.com）：

<html>
  <div onclick="location.href='http://www.google.com'">
    <div>
      <a href="http://en.wikipedia.org/">
        <img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
      </a>
      Test
    </div>
  </div>
</html>

当我使用像“file:///E:/Documents/Blog/Design/Tmp1.html”这样的本地 URL 时，这很好用（我不知道为什么）。谢谢。

更新：我在此请求背后添加了一个想法：我的博客的索引部分需要这个，Blogger 使用与单个帖子相同的例程构建该部分。在索引中，我希望主 Div 中的每次点击都重定向到帖子，但在帖子内，图像中的点击必须转到图像的 href。我的想法是将“onclick”事件动态添加到索引部分的 DIV 中。

【问题讨论】：

你用的是什么浏览器？它适用于 Firefox。
您好，我也在使用 Firefox。也许我没有很好地解释自己，请阅读我添加到问题中的“更新”。

标签： html redirect onclick href

【解决方案1】：

如果您打算内联执行此操作（不推荐，但这是您的代码），您可以将 return false; 添加到内部锚点：

<html>
  <div onclick="location.href='http://www.google.com'">
    <div>
      <a href="http://en.wikipedia.org/" onclick="return false;">
        <img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
      </a>
      Test
    </div>
  </div>
</html>

更新：基于您请求的第 2 步（这是一个糟糕的、糟糕的想法，原因有很多，但它确实有效）：

<html>
  <div onclick="location.href='http://www.google.com'">
    <div>
      <a href="http://en.wikipedia.org/" onclick="if ( this.parentElement.parentElement.onclick ) { return false; }" id="demo">
        <img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
      </a>
      Test
    </div>
  </div>
</html>

【讨论】：

很好，可以，但我还有一个问题需要进一步解释（我在请求中添加了这个）。
如果我更改锚代码，我需要有时他自己的 href 继续工作。我可以得到你的解决方案，但类似“如果父 onclick 不为 null 则返回 false，否则使用锚点 href”？
@GustavoDiSalvo 与其在原始帖子中添加新问题，不如考虑将有用的问题标记为正确并提出新问题。当以这种方式更新现有问题时，往往会使每个人都感到困惑的答案无效。
@GeorgeCummins 真的很抱歉，你是对的。我是新来的，我的英语不是最好的。下次我会做得更好:)
@imjared 太好了，谢谢！我宁愿不更改锚点（因为我必须在博客的所有先前帖子中更改它）但它有效！现在我可以继续前进了：D

【解决方案2】：

使用 javascript 设置 onclick 处理程序。代码看起来像这样：

document.getElementById("mydiv").onclick = function(){
    // navigate to new page
    window.location.href = 'URL';
}

您需要向您的 div 添加一个 id 并在 getElementById 函数中正确传递它。

【讨论】：

谢谢，但结果是一样的：图片仍然使用他自己的url，而不是父div的url。
我一定不明白你在做什么。您希望 div 点击和图片点击都转到相同的位置还是不同的位置？

【解决方案3】：

你也可以试试这样的：

<div onClick="window.open('http://www.google.com','_blank');">

如果你希望它在同一个窗口中打开，将 _blank 更改为 _self。

【讨论】：

谢谢，但我想要的是点击图片会转到该网址而不是锚点的网址。我想我没有正确解释。我已在请求中添加了更多信息。