JS阻止冒泡和取消默认事件

Posted 1024!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS阻止冒泡和取消默认事件相关的知识,希望对你有一定的参考价值。

function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则,我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}


我们都知道,链接<a>的默认动作就是跳转到指定页面,阻止它的默认行为,即阻止它的跳转
//阻止浏览器的默认行为 ()
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

JS阻止冒泡和取消默认事件(默认行为)

当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。

这 一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层

 

js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。

技术图片

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*margin: 0;padding: 0;
#btnheight: 30px;width: 80px;margin: 50px 0 0 300px;background-color: #87CEEB;
#boxheight: 200px; width: 400px;position: absolute;background-color: #A9A9A9;
border-radius: 5px;display: none;
#box1height: 40px;width: 100%;background-color: orange;line-height: 40px;
text-align: center;position: absolute;top: 0;left: 0;border-radius: 5px;z-index: 1;
#box #cuoz-index: 3;height: 20px;width: 20px;position: absolute;top: 10px;right: 15px;
#wenbwidth: 370px;height: 100px;position: absolute;top: 50px;left: 15px;overflow: auto;
#lef,#righeight: 30px;width: 80px;position: absolute;border-radius: 5px;font-weight: bold;
#lefbottom: 10px;left: 80px;
#rigbottom: 10px;right: 80px;
#hahaheight: 500px;width: 400px;border: 1px solid #222222;margin: 0 auto;overflow: auto;
#haha divwidth 95%: ;border: 1px #808080 solid;margin: 10px;border-radius: 5px;padding: 5px;
background-color: ghostwhite;line-height: 25px;
</style>
</head>
<body>
<input type="button" id="btn" value="添加">
<div id="box">
<div id="box1">弹出窗口</div>
<input type="button" id="cuo" value="×">
<textarea id="wenb"></textarea>
<input type="button" id="lef" value="确定">
<input type="button" id="rig" value="取消">
</div>
<div id="haha">
</div>
</body>
<script>
var obtn = document.getElementById("btn")
var obox = document.getElementById("box")
var obox1 = document.getElementById("box1")
var ocuo = document.getElementById("cuo")
var owenb = document.getElementById("wenb")
var olef = document.getElementById("lef")
var orig = document.getElementById("rig")
var ohaha = document.getElementById("haha")

obtn.onclick =function()
obox.style.display = "block";

ocuo.onclick =function(eve)
var e = eve ||window.event
obox.style.display = "none";
if(e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;


orig.onclick =function(eve)
var e = eve ||window.event
owenb.value = "";
if(e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;


// 鼠标
olef.onclick = function (eve)
var e = eve ||window.event
if(e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;

var odiv = document.createElement("div")
odiv.innerHTML = owenb.value;
ohaha.appendChild(odiv)
owenb.value = "";
ohaha.scrollTop = ohaha.scrollHeight;

// 键盘
owenb.onkeydown = function(eve)
var e = eve || window.event
if(e.keyCode == 13)
var odiv = document.createElement("div")
odiv.innerHTML = owenb.value;
ohaha.appendChild(odiv)
owenb.value = "";
ohaha.scrollTop = ohaha.scrollHeight;
owenb.blur();



var dw = document.documentElement.clientWidth;
var dh = document.documentElement.clientHeight;
obox.addEventListener("mousedown",function(eve)
var e1 = eve || window.event
document.addEventListener("mousemove",fn)
var ow = obox.offsetWidth;
var oh = obox.offsetHeight;
function fn(eve)
var e = eve || window.event
var h = e.pageX - e1.offsetX;
var w = e.pageY - e1.offsetY;
if(h<0)
h = 0
if(w<0)
w = 0
if(h > dw-ow)
h=dw-ow
if(w > dh-oh)
w = dh-oh

obox.style.left = h + "px";
obox.style.top = w + "px";


document.addEventListener("mouseup",function fn2()
document.removeEventListener("mousemove",fn)
document.removeEventListener("mouseup",fn2)
)
)


</script>
</html>

以上是关于JS阻止冒泡和取消默认事件的主要内容,如果未能解决你的问题,请参考以下文章

js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

右键、阻止冒泡

js 阻止冒泡 阻止默认事件

阻止默认事件和阻止冒泡的应用场景

vue.js阻止事件冒泡和默认事件

js阻止默认事件的方法