Question

在jQuery Mobile项目中，有一个对话框（不是弹出窗口），其中包含一些字段和两个按钮样式：

        <a data-role="button" data-inline="true" data-transition="none" href="#"
            data-icon="check" data-iconpos="left" id="saveEdit">Save
        </a>
        <a data-role="button" data-inline="true" data-transition="none" href="#"
            data-icon="delete" data-iconpos="left" id="closeEdit">Cancel
        </a>

单击其中一个时，单击事件处理程序将关闭对话框：

$(document).on("vclick", "#saveEdit", function () {

    LoginCookie(EditDoc, "Y");
    $('.ui-dialog').dialog('close');
});

然而，当发生这种情况时，也会在对话框“后面”的任何内容上触发单击事件，就像您点击“通过”对话框按钮一样，即使它仍然触发按钮上的单击事件。有没有办法防止这种行为？

Answer 1

我发现唯一对我有用的是制作模态阻止，特别是对于滞后接口，就像所有旧的Android版本一样。您打算让用户点击模态中的元素来关闭它。这是作为处理程序一部分的模式：

window.setTimeout(function(){
        $(myModal).on({
            popupbeforeposition: function () { //make the popup blocking - no click outside to close
                $('.ui-popup-screen').off();
            }
        }).popup("open");
    }, 500);

当然，这意味着用户不能只在模态外点击以关闭它。但如果页面上有很多表单或其他交互元素，我认为这对于可用性来说是一个非常关键的调整。

Answer 2

这似乎修复了它：

 $(document).on("vclick", "#saveEdit", function (e) {


            e.preventDefault();


            LoginCookie(EditDoc, "Y");
            $('.ui-dialog').dialog('close');
        });

jQueryMobile对话框关闭按钮触发单击它后面的项目

2 个答案: