核心提示：js停止冒泡W3C/ jquery阻止冒泡的方式:event.stopPropagation() IE:event.cancelBubble=true 兼容性写法window.event ? wind...
js停止冒泡
W3C/ jquery阻止冒泡的方式:event.stopPropagation() IE:
event.cancelBubble=true 兼容性写法
window.event ? window.event.cancelBubble=true : event.stopPropagation;
stopPropagation()/cancelBubble=true 可以阻止事件冒泡,但不会阻止浏览器的默认行为.
例子
<p id="p" onclick="alert('p')">
<ul onclick="alert('ul')">
<li>test</li>
</ul>
</p>
<script type="text/javascript">
document.getElementsByTagName('li')[0].onclick = function (event) {
alert('li')
// 阻止冒泡
var event = event || window.event;
event ? event.cancelBubble=true : event.stopPropagation();
}
</script>
js阻止默认行为
w3c / jquery阻止默认行为 : event.preventDefault() IE: evevt.returnValue=false; 兼容性写法event.preventDefault() ? event.preventDefault() : evevt.returnValue=false;
例子
<a href="https://www.baidu.com" id="test">www.baidu.com</a>
<script type="text/javascript">
var baidu = document.getElementById('test');
baidu.onclick = function (event) {
var event = event || window.event;
event.preventDefault ? event.preventDefault() : event.returnValue=false;
}
</script>
return false
js事件中return false只会组织默认行为 jquery事件中return false可以阻止冒泡和默认行为
<p id="p" onclick="alert('p')">
<ul onclick="alert('ul')">
<li id="li_a" onclick="alert('li_a')">
<a href="https://www.baidu.com" id="test">baidu</a>
</li>
</ul>
</p>
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
//js
var a = document.getElementById('test');
a.onclick = function () {
return false; //阻止默认行为
}
//jquery
$('#test').click(function () {
return false; //阻止冒泡和默认行为
})
</script>
