2019-03-15 09:53:18 热度:

浏览器事件的思考

先看下面的代码:

var $ = KISSY.all;

$(‘a’).on(‘click’,function(e){

doSomeThing();//这个方式貌似很着名

e.halt();

});

上面的代码看起来像是很好的完成了我们交给它的工作,阅读器不会再将我们重定向到href中的链接,但这么做到底有甚么不合错误呢?

在诠释有甚么不合错误前,我们来看看阅读器中事务中的几个概念

阅读器默许行动

当我们点击某一个链接的时辰,阅读器会直接跳转,在表单中按回车,表单会主动提交,这些都是阅读器的默许行动。

Javascript事务传布的机制

甚么是事务冒泡?

好比点击了一个按钮,这个元素上的事务被触发,同时该事务将会传布到它的所有父级元素中被触发。(a->div->body->document->window)这一进程被称为事务冒泡。事务冒泡是从子级元素到父级元素。

注重:不是所有的事务都能冒泡,blur、focus、load和unload不克不及像其它事务一样冒泡

甚么是事务捕捉?

和事务冒泡恰好相反,事务捕捉是从父级元素到子级元素。

甚么是事务方针?

简单的说也就是事务起头的阿谁元素,也就是上面说的a

分歧阅读器下的事务模子

撑持W3C尺度的阅读器:先捕捉在冒泡。在添加事务时用addEventListener(event,fn,useCapture)方式,基中第3个参数useCapture是一个Boolean值,为true,则采取事务捕捉,为false,则采取事务冒泡。

不兼容W3C的阅读器(IE):IE只撑持事务冒泡,它也不撑持addEventListener函数,不外供给了attachEvent()方式来处置事务。

看完上文,是不是有感受甚么处所不合错误?没有?那再看看下文。

”halt“到底做了甚么?

当你每次挪用”halt“的时辰,它现实上做了2件工作:

e.preventDefault();//禁止阅读器履行默许行动

e.stopPropagation();//打消事务冒泡

preventDefault和stopPropagation翻译成原生js后

function preventDefault(e) {

//若是供给了事务对象,则这是一个非IE阅读器

if(e && e.preventDefault) {

//禁止默许阅读器动作(W3C)

e.preventDefault();

} else {

//IE中禁止函数器默许动作的体例

window.event.returnValue = false;

}

return false;

}

function stopPropagation(e) {

//若是供给了事务对象,则这是一个非IE阅读器

if(e && e.stopPropagation) {

//是以它撑持W3C的stopPropagation()方式

e.stopPropagation();

} else {

//不然,我们需要利用IE的体例来打消事务冒泡

window.event.cancelBubble = true;

}

return false;

}

不是吧,我写最起头的代码只是想禁止阅读器的默许行动,不需要打消事务冒泡。

可是,如许写也没有甚么题目啊!(嘴硬,啪啪……)。

确切,年夜大都环境下,如许的代码没有任何题目,那若是我们把这段代码放年夜到一个年夜情况中,会呈现甚么状态

Page1

Teaser text.。.

Page2

Teaser text.。.

此刻假定我们想要在用户点击文章题目时,将文章动态载入到div.content中(也就是doSomeThing做的工作),

哈哈:上文的js代码也仍是会履行啊(年青人太急)。

我们顺着这个思绪继续,若是我想要在用户点击了一个div.post元素(或任何一个它的子元素)时,给它加上一个active类,我就需要给div.post绑定click

var posts = $(‘div.post’);

posts.on(‘click’,function () {

posts.removeClass(“active”);

$(this).addClass(“active”);

});

这个代码就会有时辰履行有时辰不履行,由于你在点击a的时辰打消了事务冒泡。

我们把这个代码的履行规模再次放年夜,产物提了一个需求,要求监听页面上所有的点击环境,一个同窗接到需求,高兴的在document上用了事务代办署理,向办事端发送了数据,回头数据一统计,仿佛少了甚么。回头一看,有人在a标签的点击事务顶用了halt。

实在这就是本文想传递的信息,年夜大都环境下,当你利用halt时,你实在真正需要的是e.preventDefault(),在你写通用的组件时辰这个题目特别凸起。

文:http://ux.etao.com/posts/528