JavaScript - 阻止父錨元素上的event.default

我製作了一個基本的移動導航下拉菜單，它使用嵌套標記打開導航的第二個（和第三個）級別。但是因爲這些元素嵌套在錨標籤中，所以它們也會觸發默認的錨事件。點擊錨點的子元素時，是否有辦法阻止錨點默認事件？JavaScript - 阻止父錨元素上的event.default

HTML

<ul class="main-menu"> 
    <li> 
     <a href="some-link.html">Some Link 
      <span class="target"></span> 
     </a> 
     <ul class="submenu"> 
      <li><a href="some-link.html">Some Link</a></li> 
      <li><a href="some-link.html">Some Link</a></li> 
      <li><a href="some-link.html">Some Link</a></li> 
     </ul> 
    </li> 
</ul>

JavaScript示例

$('span.target').on('click', function(event) { 

    $(event.target).parent().preventDefault(); 

    // Do somthing 

});

來源

2017-04-10 Frederick M. Rogers

嘗試'event.stopImmediatePropagation（）' –

你爲什麼要使用阿克爾標籤，如果你不想使用它呢？爲什麼不使用div或其他跨度並使用js來實現你想要的行爲？ – Cruiser

preventDefault不是DOM的一部分，它是事件的一部分。聽起來像你想要https://api.jquery.com/event.stoppropagation/ – epascarello

您可以試試這段代碼。當你點擊錨點上的孩子時，它可以防止父錨元素的默認行爲。我使用的核心JavaScript這裏：

var menuAnchor = document.querySelectorAll('.main-menu a'); 
 

 
for(var i = 0, len = menuAnchor.length; i < len; i++){ 
 
\t menuAnchor[i].addEventListener('click', function(event){ 
 
\t \t if(event.target != this) event.preventDefault(); 
 
\t }); 
 
}

來源

2017-04-10 18:13:24

不幸的是，這將阻止我想要的錨的默認動作，我只是不希望它點擊錨內的子元素時觸發。 –

我改變了代碼。它現在工作正常。 –

當你點擊錨的孩子時，它可以防止默認（停止訪問鏈接）。但是當你點擊錨點（不是錨點的子點）時，它不會阻止默認值（請訪問鏈接）。 –

你可以阻止事件的傳播，並取消它的默認行爲。看到這一點：

$('span.target').on('click', function(event) { 
 
    event.stopPropagation(); 
 
    event.preventDefault(); 
 
    
 
    // the rest of your code here... 
 
});

正如在評論中提到的，我加的2線作爲我的「自動」工作流程的一部分，如果我綁定到一個錨標記（a）和防止導航離開頁面的默認行爲（即preventDefault（））和stopPropagation以避免觸發父元素的綁定事件。

來源

2017-04-10 17:51:08 JorgeObregon

注意......做一個或其他將工作...和'返回false'也將做這兩個 – charlietfl

我將這兩行作爲一部分添加我的'自動'工作流，以防我綁定到錨標籤（'a'）並阻止導航離開頁面的默認行爲（即preventDefault（）'）和'stopPropagation'來避免父元素'綁定事件被觸發。 – JorgeObregon

我可能會誤會，但是這不會簡單地阻止我將附加到錨點的事件/處理程序？ –

JavaScript - 阻止父錨元素上的event.default

回答

相關問題