js停止冒泡
- W3C/ jquery阻止冒泡的方式:
event.stopPropagation()
- IE:
event.cancelBubble=true
- 兼容性写法
window.event ? window.event.cancelBubble=true : event.stopPropagation;
stopPropagation()/cancelBubble=true 可以阻止事件冒泡,但不会阻止浏览器的默认行为.
例子
<div id="div" onclick="alert('div')">
<ul onclick="alert('ul')">
<li>test</li>
</ul>
</div>
<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="http://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可以阻止冒泡和默认行为
<div id="div" onclick="alert('div')">
<ul onclick="alert('ul')">
<li id="li_a" onclick="alert('li_a')">
<a href="http://www.baidu.com" id="test">baidu</a>
</li>
</ul>
</div>
<script src="http://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>