Braintree drop-in auto-reload despite paymentMethodNonceReceived

So I have a single-page app, and a braintree drop-in located on the register page. There is an option for a free account, so I do not have the form that the drop-in is inside as the main form of the page.

So I have a form like this:

<form id="payment-form">
    <div id="payment-box"></div>
    <input type="submit" tabindex="-1" style="visibility:hidden;position:absolute;"/>
</form>

I have a handler on the form to prevent the form from submitting, and in my braintree setup, I've defined a paymentMethodNonceReceived handler, but when I trigger the form, the page reloads, depending on the url. If you watch the log, paymentMethodNonceReceived is not triggered.

For instance, my url for register is http://ift.tt/1Dm1vsL but when the form is triggered, it reloads to http://ift.tt/1Dm1vsL which I understand is usually the same page, but not with a single-page app like this. this triggers page reload and resets all my registration fields. If you run this again from the ?#! version of the url, then it works as expected, no reload and the handler is triggered. I do not want to add a ? to my url just for this.

I really like the drop-in and feel like this should work, but it sounds like I'm going to have to do a custom implementation. Is there something I'm missing?