使锚标记中的特定内容不可重定向，但对于Javascript可单击

如何解决使锚标记中的特定内容不可重定向，但对于Javascript可单击

我需要将整个 div 重定向到特定的URL。但是，在该 div 中，我还想添加其他可点击的 div 标签，以便可以对javascript进行更改。

我用锚标记包裹了父div，以使整个div及其内容重定向。

一个简化的示例：

<a href="#">
    <div class="firstContainer">
        <div class="noRedirctYesOnClickEvents"> <!-- Does not redirct but can be changed by event E.g.: click,change -->
        </div>
    </div>
    <div class="secondContainer">
         <div class="secondBox">
              <div class="noRedirctYesOnClickEvents"> <!-- Does not redirct but can be changed by event E.g.: click,change -->
              </div>
         </div>
    </div>
</a>

编辑：

1. onClick（）不起作用。

此外，我忘了提到我需要它与事件侦听器和JQuery函数（click（），on（），...）一起使用

1. 给定的解决方案仅在元素数量保持相同的情况下有效。

例如： 网页加载了以下元素：

<a href="#">
    <div class="firstContainer">
        <div class="noRedirctYesOnClickEvents"> <!-- Does not redirct but can be changed by event E.g.: click,change -->
              </div>
         </div>
    </div>
</a>

Javascript复制了它：

// First Section
<a href="#">
    <div class="firstContainer">
        <div class="noRedirctYesOnClickEvents"> <!-- Does not redirct but can be changed by event E.g.: click,change -->
              </div>
         </div>
    </div>
</a>

// Second Section
<a href="#">
    <div class="firstContainer">
        <div class="noRedirctYesOnClickEvents"> <!-- Does not redirct but can be changed by event E.g.: click,change -->
              </div>
         </div>
    </div>
</a>

给出的解决方案不适用于第二部分，仅适用于第一部分。

第二部分是使用以下JQuery / Javascript代码创建的：

let el = `
<a href="#">
    <div class="firstContainer">
        <div class="noRedirctYesOnClickEvents"> <!-- Does not redirct but can be changed by event E.g.: click,change -->
              </div>
         </div>
    </div>
</a>
`;

document.append(el);

解决方法

在这里：使用OnClick = function（），这将在单击对象时触发JS函数。

尝试一下，让我知道。

,

尝试一下-我在链接上使用了preventDefault，在div上使用了stopPropagation

$(document).on("click",".redirect",function(e) { // delegate from document since you append to document
  e.preventDefault(); // stop the link
  console.log("a clicked");
})
$(document).on("click",".noRedirectYesOnClickEvents",function(e) {
  e.stopPropagation(); // stop the click from triggering the link
  console.log("noRedirectYesOnClickEvents clicked");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="redirect">
  <div class="firstContainer">Click here to redirect
    <div class="noRedirectYesOnClickEvents">
       Does not redirect but can be changed by event E.g.: click,change 
    </div>
  </div>
  <div class="secondContainer">Click here to redirect
    <div class="secondBox">Click here to redirect
      <div class="noRedirectYesOnClickEvents">
         Does not redirect but can be changed by event E.g.: click,change 
      </div>
    </div>
  </div>
</a>

,

我发现本案的最佳方法是使用e.preventDefault()。但是，如果要动态添加元素，则需要使用事件委托。

$(parent).on("event","element Selector",function(e){
    e.preventDefault(); // stop the link
})

我使用的是：

$(document).on("click","noRedirctYesOnClickEvents",function(e){
    e.preventDefault(); // stop the link
})

有关更多信息，请检查Event Delegation

谢谢@mplungjan的贡献！

,

Just add this
`
<a href="#">
    <div class="firstContainer">
        <div class="noRedirctYesOnClickEvents" onclick="myfunction()"> 
        </div>
    </div>
    <div class="secondContainer">
         <div class="secondBox">
              <div class="noRedirctYesOnClickEvents" onclick="myfunction()"> 
              </div>
         </div>
    </div>
</a>

<script>
function myfunction() {
    //DO SOMETHING
}
</script>
`