Heim > Web-Frontend > js-Tutorial > js阻止冒泡及jquery阻止事件冒泡示例介绍_javascript技巧

js阻止冒泡及jquery阻止事件冒泡示例介绍_javascript技巧

WBOY
Freigeben: 2016-05-16 17:14:16
Original
1173 Leute haben es durchsucht
js阻止冒泡
在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容。
复制代码 代码如下:

function stopPro(evt){
var e = evt || window.event;
//returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,
//可以取消发生事件的源元素的默认动作。
//window.event?e.returnValue = false:e.preventDefault();
window.event?e.cancelBubble=true:e.stopPropagation();
}

或者:
复制代码 代码如下:

function cancelBubble(e) {
var evt = e ? e : window.event;
if (evt.stopPropagation) {
//W3C
evt.stopPropagation();
}
else {
//IE
evt.cancelBubble = true;
}
 
JQuery 提供了两种方式来阻止事件冒泡。
方式一:event.stopPropagation();
复制代码 代码如下:

$("#div1").mousedown(function(event){
event.stopPropagation();
});

方式二:return false;
复制代码 代码如下:

$("#div1").mousedown(function(event){
return false;
});

Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作。
例如:
复制代码 代码如下:

$("a").click(function(event){
event.preventDefault(); //阻止默认动作即该链接不会跳转。
alert(4);//但是这个还会弹出
event.stopPropagation();//阻止冒泡事件,上级的单击事件不会被调用
return false;//不仅阻止了事件往上冒泡,而且阻止了事件本身
});

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。
场景应用:Google 和 百度的联想框,当弹出下拉列表,用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。
Jquery案例:
复制代码 代码如下:






aaaaaaa

baidu.com



js案例:
复制代码 代码如下:

function tt(){
alert("div");
}
function ttt(){
var e = arguments.callee.caller.arguments[0] || window.event;
window.event?e.returnValue = false:e.preventDefault();
alert(3);
window.event?e.cancelBubble:e.stopPropagation();
alert(4);
}




ccccc
baidu.com

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage