仅在onclick之前触发href事件

Question

I found so many articles about "Trigger an href event only after the onclick" but my requirement is almost opposite ie "Trigger an href event only before the onclick". I want my href execute first and then my onclick event.

Here is my code:

<li id="menu-users" class="dropdown">
    <a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-users"></i>Manage Users<b class="caret"></b></a>
    <ul class="dropdown-menu navmenu-nav">
        <li><a href="manage_a" onclick="keepNavMenuOpen()">Manage A</a></li>
        <li><a href="manage_b" onclick="keepNavMenuOpen()">Manage B</a></li>
        <li><a href="manage_c" onclick="keepNavMenuOpen()">Manage C</a></li>
        <li><a href="manage_d" onclick="keepNavMenuOpen()">Manage D</a></li>
    </ul>
</li>


function keepNavMenuOpen() {
    var element = document.getElementById("menu-users");
    element.classList.add("open");
}

Answer 1

Have you tried a setTimeout call to delay the onclick event?

Like this:

<li><a href="manage_a" onClick="setTimeout(function(){keepNavMenuOpen.call(this)},20)">Manage A</a></li>

Refer to here: enter link description here

Answer 2

You are misusing the anchor element in place of the button element. Change to <button> elements then attach your behaviors to it.

Source: MDN's Page .

Anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (eg, screen readers). In these cases, it is recommended to use a instead. In general you should only use an anchor for navigation using a proper URL.