event.preventDefault() 不取消 jQuery Mobile 中的链接方向

从事件处理程序返回 false 将自动调用event.stopPropagation() 和event.preventDefault().也可以为handler 作为 function(){ return false; 的简写}.所以，$("a.disabled").on("点击", false);将事件处理程序附加到所有带有禁用"类的链接，阻止它们被跟踪当它们被点击时，也会阻止事件冒泡.

Background
I've been struggling with this stupid little problem of trying to cancel link direction when click event is fired on an anchor element in jQuery Mobile app.

Let's say I have a simple multi-page document like this:

<div data-role="page" id="page-1">          
    <div data-role="content">
        <a href="#page-2" id="mLink">page 2</a>
    </div><!-- /content -->
</div><!-- /page -->

<div data-role="page" id="page-2">
    <div data-role="content">
    </div><!-- /content -->
</div><!-- /page -->

... and JavaScript like this:

(function (MyApp, $, undefined) {
    'use strict';

    // Initializes app
    function init() {       
        $('#mLink').on('click', function (event) {
            event.preventDefault();
            //event.stopPropagation();
            //event.stopImmediatePropagation();

        });
    }

    // jQuery Mobile is ready now -> override defaults
    $(document).on("mobileinit", function () {
        // Set the default page transition
        $.mobile.defaultPageTransition  = 'slide';
    });

    // jQuery Mobile is ready now 
    $(document).ready(init);

}(window.MyApp = window.MyApp || {}, jQuery));

Problem
I just can't figure out why event.preventDefault() isn't canceling the page transition. However, if I add event.stopPropagation() it will cancel it. Also if I remove the jQuery Mobile library from the app, it works without event.stopPropagation().

Question
Is this normal behavior and is it ok to always call them both in the handler to cancel the link direction?

Notes
I'm using jQuery Mobile only for it's multipage template, navigation and transition capabilities.

Additional question
The question lurking behind my original question kind of was 'what jQuery Mobile does to a link that intercepts event.preventDefault() method to not prevent the link's default action, i.e. going to the target page.?'

Normal? Yes. OK to call both? Yes.
event.preventDefault() is the only tool you have to prevent the browser's default behavior and event.stopPropagation() is the only tool you have to prevent competing event handlers from firing.

If you want a one-liner, you can use return false to achieve the same result. From http://api.jquery.com/on/:

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault(). A false value can also be passed for the handler as a shorthand for function(){ return false; }. So, $("a.disabled").on("click", false); attaches an event handler to all links with class "disabled" that prevents them from being followed when they are clicked and also stops the event from bubbling.

这篇关于event.preventDefault() 不取消 jQuery Mobile 中的链接方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！