2019-04-07 浏览器的默认事件 以及 冒泡

1:阻止浏览器的冒泡

.stopPropagation() // 普通浏览器

 window.event.cancelBubble = true; // ie浏览器

if ( e && e.stopPropagation ) 

    e.stopPropagation();

else{

    window.event.cancelBubble = true;

}


2:阻止浏览器的默认行为

e.preventDefault:阻止浏览器的默认行为

 window.event.returnValue = false; 阻止ie的默认行为

if ( e && e.preventDefault )

        e.preventDefault();

    else  window.event.returnValue = false;

3: return false

在原生js中,return false; 相当于同时调用了 e.preventDefault()

在jq中,  return false; 相当于同时调用了 e.preventDefault();与 e.stopPropagation();


性能优化:

浏览器的默认滚动行为的执行顺序是先等到事件监听器的回调函数执行完成后才会执行,这个机制是因为在回调函数中有可能将默认行为禁止了,所以需要在回调执行完之后触发默认滚动行为,这个时候就会导致页面卡顿,卡顿时间大约几百毫秒,也与回调函数的代码逻辑有关,所以这里有个可以优化的点就是注册事件监听的时候,在回调函数执行之前就可以触发默认滚动行为。具体代码如下

target.addEventListener(type,listener,{passive: true});

注意在移动端上,如果要阻止浏览器的默认行为使用如下:

target.addEventListener(type,listener,{passive: false});

如果不添加passive参数,iOS上会默认为true,那么调用preventDefault是没有用的。

移除事件时,不需要带参数

removeEventListener("foo", listener)

参数具体有三个:

capture:  是否在捕获阶段触发

passive:是否立马执行浏览器默认行为

once:这个监听只执行一次

你可能感兴趣的:(2019-04-07 浏览器的默认事件 以及 冒泡)