Jquery mobile jQuery Mobile-在触发changepage事件后防止页面导航

基本上，用例是这样的：

我有一个表单，用户在填写表单时无意中单击了另一个链接。在pagebeforehide事件中，我想停止导航。我试着去做

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

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

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>  

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

这是一个正在工作的

我看到了这个例子，但它似乎对我不起作用。但是，我还没有将我的结构转换为新的pagecontainer小部件。让我试试看它是否有效。
$(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("");   
            }
        }
    });

});