data-preventDefault (v2.2.0+)

用来阻止(或介入)Mobilebone的一些默认行为,这些行为包括,页面过场;点击链接过场或请求;点击表单提交。

使用

例如,页面上有如下HTML:

<a href="form.html">点击加载一个表单</a>

如果没有其他设置,Mobilebone会自动请求form.html这个页面并过场载入。但是,往往,我们可能需要先判断用户是否已经登录了,此时,就需要data-preventdefault(不区分大小写)的介入。如:

<a href="form.html" data-preventdefault="isLoginout">点击加载一个表单</a>

于是,我们就可以在isLogin这个方法中做阻断判断了:

var isLoginout = function(target) {
    // 支持一个参数target, 指的就是对应的a元素
    // 如果没有登录,返回true
    if (isLogin == false) return true;    
};

从上面代码可以看到,当data-preventdefault中介函数返回值为true的时候,就会中断Mobilebone的默认行为,你就可以做一些你想做的其他事情,例如,先弹出个登录弹框。

使用

data-preventdefault中介函数还有一个很重要的应用就是表单验证。默认情况下,表单点击提交按钮,就会走原生验证,然后Ajax过场。但是,实际开发,验证是交给自己,而不是浏览器,于是,在提交之前,我们有必要验证下,此时,就得靠data-preventdefault.

写在form标签上,如下:

<form method="get" action="search.html" data-preventDefault="validate_false" novalidate></form>

由于data-preventdefault中介函数返回true时候才中断,因此,对应的函数关键字应该是“验证不通过”的意思,例如这里的validate_false.

var validate_false = function(form) {
    // 支持一个参数form, 指的就是表单元素
    // 如果文本框没有值
    if (input.value.trim() == "") {
        // 显示错误提示
        // xxxx.show();
        // 中断Mobilebone行为
        return true;    
    }
};

使用

page页面元素上也可以使用此中介阻断API,其绑定以及函数参数与callback/fallback完全一致。

例如,我们Ajax请求页面的是一个弹框页面,此时,当前页面是不能离开舞台的,就可以使用data-preventdefault中断。这个以后有机会再放置实例。

或者实现页面跳转效果等。