使锚标记中的特定内容不重定向但可点击 Javascript [重复]

Question

我需要将整个 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 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>

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 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>

// 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 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>

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

第二部分使用以下 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 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>
`;

document.append(el);

Answer 1

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

试一试，然后告诉我。

Answer 2

我为我的案例找到的最佳方法是使用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 的贡献！

Answer 3

试试这个 - 我在链接上使用 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>