event.preventDefault() 不取消 jQuery Mobile 中的链接方向 [英] event.preventDefault() not canceling link direction in jQuery Mobile

问题描述

背景
我一直在努力解决这个愚蠢的小问题，即当在 jQuery Mobile 应用程序中的锚元素上触发 click 事件时尝试取消链接方向.

假设我有一个这样的简单多页文档:

... 和 JavaScript 是这样的:

(function (MyApp, $, undefined) {'使用严格';//初始化应用函数初始化(){$('#mLink').on('click', function (event) {event.preventDefault();//event.stopPropagation();//event.stopImmediatePropagation();});}//jQuery Mobile 现在准备好了 ->覆盖默认值$(document).on("mobileinit", function () {//设置默认页面过渡$.mobile.defaultPageTransition = '幻灯片';});//jQuery Mobile 现在准备好了$(document).ready(init);}(window.MyApp = window.MyApp || {}, jQuery));

问题
我只是不明白为什么 event.preventDefault() 没有取消页面转换.但是，如果我添加 event.stopPropagation() 它将取消它.此外，如果我从应用程序中删除 jQuery Mobile 库，它可以在没有 event.stopPropagation() 的情况下工作.

问题
这是正常行为吗?是否可以在处理程序中始终调用它们来取消链接方向?

备注
我使用 jQuery Mobile 只是因为它的多页模板、导航和转换功能.

其他问题
潜伏在我原来的问题后面的问题是'jQuery Mobile 对拦截 event.preventDefault() 方法以不阻止链接的默认操作的链接做了什么，即转到目标页面.?'

解决方案

正常吗?是的.两个都可以打电话吗?是的.
event.preventDefault() 是防止浏览器默认行为的唯一工具，event.stopPropagation() 是防止竞争事件处理程序触发的唯一工具.

如果你想要一个单行，你可以使用 return false 来达到同样的效果.来自 http://api.jquery.com/on/:

<块引用>

从事件处理程序返回 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 中的链接方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！