Question

<a href="myList/doctor">
  <div>
    <span> The important Info 
       <a data-toggle="modal" data-target="#mapModal">
    <a data-toggle="modal" data-target="#mapModal" 
       id="obliqueIcon">&nbsp;&nbsp;&nbsp;<oblique 
          class="iconSize">i</oblique></a>
       </a>
    </span>
  </div>
</a>

document.getElementById("obliqueIcon").onclick = function(e) {

  return false; // or use e.stopPropagation() and e.preventDefault()
 }

我有上面的代码。在这里div可以单击，但是这里的'i'按钮应该打开一个模型框（data-target =“＃mapModal”），但这不是因为锚标记包含'href '。

我想做的是不应该更改此代码，但是当我单击倾斜时，它应该打开一个模型框，但不要重定向到链接。有什么方法可以限制它。请提出帮助。谢谢。

Answer 1

因此，HTML存在一些问题：首先，没有<oblique>标签（您是说<i>吗？），其次，您不能嵌套{{ 1}}标签放在另一个<a>中。

这就是说，不过，您要的是更一般的形式-链接标签中的节点，如果单击该节点将不会触发该链接-可能是；您需要做的就是防止click事件从该节点冒泡到锚标记：

<a>

document.getElementById("foo").onclick = function(e) {
  // open your modal here
  
  return false; // or use e.stopPropagation() and e.preventDefault()
}

已添加到答案中，以回应以下评论：这是应用于HTML的相同代码段：

<a href="https://example.com">
  This should link to the other page...
  <span id="foo">but this should not</span>
</a>

document.getElementById("obliqueIcon").onclick = function(e) {

  return false; // or use e.stopPropagation() and e.preventDefault()
}

我没有收到您要报告的错误消息（“无法设置属性'onclick'为null”），但是可能是因为您继续使用无效的HTML（嵌套的<a href="myList/doctor"> <div> <span> The important Info <a data-toggle="modal" data-target="#mapModal"> <a data-toggle="modal" data-target="#mapModal" id="obliqueIcon">   <oblique class="iconSize">i</oblique></a> </a> </span> </div> </a>标签）-可能是某些浏览器无法访问那些节点吗？（我要强调的是，这只是一个猜测；我除了处理无效的HTML之外，没有很多经验，只能通过对其进行修复来解决，因此我对所有浏览器如何处理它都没有深刻的了解。我我们已经测试过Safari，Chrome和FF，即使使用无效的HTML都可以正常运行，但是，如果您使用的是其他浏览器，则可能是这种情况。如果您在第二个代码段中看到错误，但在第一个代码段中看不到错误，则可以确认如果没有发现任何错误，则您的代码中还有其他错误。）

如何将href链接限制为<oblique>标签

1 个答案: