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

问题描述

背景

在jQuery Mobile应用程序中的一个锚点元素上触发点击事件时，我一直在努力解决这个愚蠢的小问题，试图取消链接方向。 p>

假设我有一个简单的多页文档，如下所示：

  < div data-role =pageid =page-1> 
< div data-role =content> 
< a href =＃page-2id =mLink>第2页< / a> 
< / div><！ -  / content  - > 
< / div><！ -  / page  - > 
 
< div data-role =pageid =page-2> 
< div data-role =content> 
< / div><！ -  / content  - > 
< / div><！ -  / page  - > 
  

...和JavaScript像这样：

 （function（MyApp，$，undefined）{
'use strict'; 
 
 //初始化app 
 function init（） {
 $（'＃mLink'）。on（'click'，function（event）{
 event.preventDefault（）; 
 //event.stopPropagation（）; 
 //event.stopImmediatePropagation（）; 
 
}）; 
} 
 
 // jQuery Mobile已经准备好了 - >覆盖默认值
 $（文件）.on（mobileinit，function（）{
 //设置默认页面转换
 $ .mobile.defaultPageTransition ='slide'; 
}）; 
 
 // 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/ ：

< blockquote>

从事件处理程序返回false将自动调用
event.stopPropagation（）和
event.preventDefault（）。对于
处理程序，也可以传递false值作为function（）{return false; }。所以，
$（a.disabled）。on（click，false）;将所有
链接的事件处理程序附加到类disabled，阻止它们被点击时被跟随
，并且也阻止事件冒泡。

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屋！