Links and ng-clicks in Bootstrap dropdown not working on Chrome 48 for Windows 8.1

问题

I've got a Bootstrap dropdown in my app's navbar with some links in it. Some links have ng-click triggers attached while others are just regular links. The following code works fine on all major browsers on Mac OS 10.11 as well as on Windows 7. On Windows 8 it works in IE 11, but not in Chrome 48 (latest). In Chrome 48, clicking a link in the dropdown causes the dropdown to close, but the ng-click or link href is not triggered. There are no console errors and I've confirmed that there are no browser extensions present that could cause issues.

<li class="dropdown">
    <div class="dropdown-toggle" style="width:initial;">
        <div class="dropdown-link nav-dropdown-link" id="dropdownMenuAccount" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <%= current_employer.email %> <i class="fa fa-caret-down"></i>
        </div>
        <ul class="dropdown-items dropdown-menu account" aria-labelledby="dropdownMenuAccount">
            <li>
                <a href="#" ng-click="setTab('/setup?tab=account');"><i class="fa fa-fw fa-user"></i> My Account</a>
            </li>
            <% if current_employer.role == 'Admin' %>
            <li>
                <a href="#" ng-click="setTab('/setup?tab=users');"><i class="fa fa-fw fa-user-plus"></i> Users</a>
            </li>
            <% end %>
            <li><%= link_to "<i class='fa fa-fw fa-credit-card'></i> Billing".html_safe, update_payment_path %></li>
            <li><%= link_to "<i class='fa fa-fw fa-sign-out'></i> Sign Out".html_safe, destroy_employer_session_path, :method => :delete %></li>
        </ul>
    </div>
</li>

Update

After some testing I've determined what the underlying issue is, however I'm still not sure how to solve it. I first attached a click listener to the document like so:

$(document).on('click', function(e) { console.log(e.target) })

When I did this other browsers, the result were as I suspected. Clicking on the dropdown-toggle div to open the menu registered a click to that element. Subsequently clicking an element in the dropdown registered a click to the dropdown element's a tag, therefore triggering the link or ng-click attached to that a element.

When I ran that code on Chrome 48 for Windows 8.1, clicks to elements in the dropdown were registered as clicks on the dropdown-toggle div.

It seems as though for Chrome 48 on Windows 8.1, click events are somehow being prevented from propagating down the DOM tree from the div to the target a element.

Update #2

I just upgraded from jQuery 1.11.3 to 1.12.0 to test if that would affect the click propagation issue. Unfortunately the behavior is the same as before.

回答1:

Try this way:

<a href ng-click="setTab('/setup?tab=account');"><i class="fa fa-fw fa-user"></i> My Account</a>

href attribute with # value may cause navigation.

回答2:

Finally solved my own problem. Wanting to leave no stone unturned, I bumped up my Bootstrap version from 3.3.4 to 3.3.5 and re-tested the click propagation using the snippet of jQuery from the first update to my question. When I did this, the propagation stopped on the dropdown-backdrop instead of the button div, which tipped me off to the backdrop's existence. I then realized that if I hide the dropdown backdrop, as this post suggest, the problem goes away!

Unfortunately this answer comes with a few caveats:

1. I don't know how this solution impacts mobile, which is what the backdrop is supposed to be for. In my case this is a non-issue since the project isn't intended for mobile anyways.
2. I still don't know why the click propagation gets disrupted only on Chrome for Windows 8, so this solution is a hack at best.

Hopefully this helps someone else down the road. This was quite a pain to debug.

来源：https://stackoverflow.com/questions/35612895/links-and-ng-clicks-in-bootstrap-dropdown-not-working-on-chrome-48-for-windows-8