Question

基本上用例是：

我有一个表单，用户填写表单并意外点击其他链接。在pagebeforehide事件中，我想停止导航。我试着做

event.stopPropagation();
event.preventDefault();

但它们都没有阻止导航的发生。有谁知道怎么做？目前还不清楚如何处理这个问题。

Answer 1

如果您的所有代码都在正确的位置，

event.preventDefault();应该可以正常工作。这是一个简单的例子：

<div data-role="page" id="page1">
     <div data-role="header"  data-position="fixed" data-tap-toggle="false">
        <h1>My page</h1> 
    </div>  
    <div role="main" class="ui-content">
        <label for="text-basic">Type 1 to allow navigation:</label>
        <input type="text" name="text-basic" id="text-basic" value="" />
        <br /><br />
        <a class="ui-btn" href="#page2">Go to page 2</a>
    </div> 
     <div data-role="footer" data-position="fixed" data-tap-toggle="false">
         <h1>My page footer</h1>
    </div> 
</div>  

<div data-role="page" id="page2">
     <div data-role="header"  data-position="fixed" data-tap-toggle="false">
        <h1>My page 2</h1> 
    </div>  
    <div role="main" class="ui-content">
        page 2
        <a class="ui-btn" href="#page1">Go back to page 1</a>
    </div> 
     <div data-role="footer" data-position="fixed" data-tap-toggle="false">
         <h1>My page footer</h1>
    </div> 
</div>

我有2页，只希望用户进入第2页，如果他/她输入＆＃34; 1＆＃34;进入文本框。

$(document).on("pagecreate", "#page1", function(){

    $( "body" ).on( "pagecontainerbeforetransition", function( event, ui ) {
        var currPage = $( "body" ).pagecontainer( "getActivePage" ).prop("id");
        if (currPage == "page1"){
            var val = $("#text-basic").val();
            if (val != "1") {
                alert("you must enter 1 in the text box!");
                event.preventDefault();
            } else {
                 $("#text-basic").val("");   
            }
        }
    });

});

在pagecontainer小部件pagecontainerbeforetransition事件中，我看到我们当前正在查看哪个页面，如果是page1，则检查用户在文本框中输入的内容。如果我找不到字符串＆＃34; 1＆＃34;，请阻止导航并提醒用户。

这是一个有效的 DEMO

jQuery Mobile - 触发changepage事件后阻止页面导航

1 个答案: