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

js教程评论216 views阅读模式

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

企鹅博客
  • 本文由 发表于 2020年6月12日 14:05:54
  • 转载请务必保留本文链接:https://www.qieseo.com/420625.html

发表评论