书:"Pro JavaScript Techniques 精通JavaScript"之重载浏览器默认行为

浏览器的默认行为可以归结为没有明确指令而浏览器自动执行所有这些行为.以下是一些不同事件的不同类型默认行为的例子:

1.点击<a>元素将重定向到它的href特性上的URL

2.使用键盘并按Ctrl+S,浏览器将保存网站的HTML文件

3.提交HTML<form>将向指定的URL提交数据,并重定向浏览器到该地址上

4.鼠标移动到一个有alt或title(取决于浏览器)<img>上将会出现工具条,提示<img>描述

    就算阻止事件冒泡或者完全没有绑定事件,浏览器还是会执行所有这些行为.这会在你的脚本中引发重大问题.如果希望提交表单的表现标新立异,或者想要<a>元素表现与众不同,而非其原有的意图?因为取消事件冒泡并不能防止默认行为,你需要一些特定的代码直接处理.就如取消冒泡事件一样,有两种阻止发生默认行为的途径:IE的特定方式和W3C的方式.两种方式均在代码清单6-8中展示.该函数带一个传入事件处理函数的事件对象参数,且应在时间处理函数的末尾使用,比如: return stopDefault(e); ------因为处理函数同时需要返回false(false本身也从stopDefault返回)

代码清单6-8 防止发生默认浏览器行为的通用函数

function stopDefault(e){

            //防止默认浏览器行为(W3C)

            if (e&&e.preventDefault)

                e.preventDefault();

            //IE中阻止浏览器行为的捷径

            else

                window.event.returnValue=false;

            return false;

}

使用StopEvent函数,就可以阻止浏览器的任何默认行为了.这可以让你为用户编写一些巧妙的交互,如代码清单6-9所示的例子.该代码使所有的链接在一个内置的<iframe>中加载,而不是重装入整个页面.这么做能让用户保持在一个页面上,因此也可能获得某种情况下更佳的交互体验

代码清单6-9 使用stopDefault()重载浏览器功能

//假设页面中已经存在一个iframe,它的id是'iframe'

var iframe=document.getElementById("iframe");

//定位页面上所有的<a>元素

var a=document.getElementsByTagName("a");

for (var i=0;i<a.length;i++) {

       //为<a>绑定点击处理函数

       a[i].οnclick=function(e){

              //设置iframe的地址

             iframe.src=this.href;

             //防止浏览器访问<a>所指向的网站(这是一个默认行为)

                   return stopDefault(e);

       };

}