必威官网登录-betway必威官网|体育在线

热门关键词: 必威体育,betway必威官网,必威官网登录,必威app下载

betway必威官网也就不会再次弹出body的警告框,也

作者: 计算机网络  发布:2019-09-09

JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播。如以下例子:

JavaScript中使用stopPropagation函数停止事件传播例子,stoppropagation

JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播。如以下例子:

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stopPropagation()使用 - 琼台博客</title>
</head>
<body>
<button>button</button>
</body>
</html>
[/code] 
没有加stopPropagation()
[code]
var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
  alert('button click');
};

document.body.onclick=function(event){
  alert('body click');
}

DOM逐层往上传播,所以单击button按钮也传播到了body层,于是body层的click也响应了。结果弹出两个警告框,分别是button与body。

加了stopPropagation()

var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
  alert('button click');
  // 停止DOM事件层次传播
  event.stopPropagation();
};

document.body.onclick=function(event){
  alert('body click');
}

在button的单击事件处理函数中使用了stopPropagation()停止事件传播函数,所以在弹出来自button单击事件的警告框以后就传播不到body,也就不会再次弹出body的警告框,结果只谈一次警告框。

好多童鞋在写JS的时候,往往忽视了DOM事件逐层往上传播的特性,导致程序出现异常。如果需要了解更深入的知识可以找找有关JS事件冒泡的资料看看。

var btn = document.getElementById("btn");
    var handler = function(event){
        switch(event.type){
            case 'click':
            alert("clicked");
            break;
            case "mouseover":
            event.target.style.backgroundColor = "red";
            break;
            case "mouseout":
            event.target.style.backgroundColor = "";
            break;
        }
    };
    btn.onclick = handler;
    btn.onmouseover = handler;
    btn.onmouseout = handler;

HTML代码:

javascript 的事件冒泡怎阻止

1、cancelBubble(HTML DOM Event 对象属性) :如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。

2、stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

3、 preventDefault(HTML DOM Event 对象方法)通知浏览器不要执行与事件关联的默认动作。

例子:
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}

把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了  

betway必威官网,这里通过检测event.type属性,让函数能够确定发生了什么事件,并执行相应的操作。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stopPropagation()使用 - 琼台博客</title>
</head>
<body>
<button>button</button>
</body>
</html>
[/code] 
没有加stopPropagation()
[code]
var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
  alert('button click');
};

document.body.onclick=function(event){
  alert('body click');
}

javascript事件的冒泡机制,以及怎阻止冒泡

this.style.border = '1px solid white';};}var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');for (var i = 0, n = all2.length; i < n; ++i){all2[i].onmouseover = function(e){this.style.border = '1px solid red';if (e) //停止事件冒泡e.stopPropagation();elsewindow.event.cancelBubble = true;log.value = '鼠标现在进入的是: ' + this.nodeName;};all2[i].onmouseout = function(e){this.style.border = '1px solid white';};}}window.onload = init;//]]</script</head<body<h1Bubble in JavaScript DOM</h1<pDOM树的结构是:</p<pre<codeUL- LI- A- SPAN</code</pre<div<ul<li<a href="#"<spanBubbllllllllllllllle</span</a</li<li<a href="#"<spanBubbllllllllllllllle</span</a</li</ul</div<textarea</textarea<p鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(<codemouseover</code)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。</p<div<ul<li<a href="#"<spanBubbllllllllllllllle</span</a</li<li<a href="#"<spanBubbllllllllllllllle</span</a</li</ul</div<p如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。</p</body</html从上面的例子可知道当你触发任何一个元素的事件时浏览器默认从该元素向上父元素上之一迭代冒泡的出发具有该事件的父元素,直到包含该元素的最大父元素为止。如果想阻止这样的情况发生,例如,我只想让某个元素执行moveover事件,不想让保护她的父元素执行,就需调用js的阻止函数e.stopPropagat......余下全文>>  

JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止...

要阻止特定事件的默认行为,可以使用preventDefault()方法。例如,链接的默认行为就是在被单击的时候回导航到其href特性指定的URL。如果你想阻止链接导航这一默认行为,那么通过链接的onclick时间处理程序可以取消它,如下面的例子所示。

DOM逐层往上传播,所以单击button按钮也传播到了body层,于是body层的click也响应了。结果弹出两个警告框,分别是button与body。

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
}

加了stopPropagation()

只有cancelable属性设置为true的时间,才可以使用preventDefault()来取消其默认行为。

本文由betway必威官网发布于计算机网络,转载请注明出处:betway必威官网也就不会再次弹出body的警告框,也

关键词: