在JS中往往会遇到这样的问题:
制作一个下拉菜单,当点击一个div时显示下拉菜单,但是又需要当点击页面空白部分隐藏下拉菜单。这时候就需要用到阻止事件冒泡。
原生JS实现代码:
- document.onclick = function(event){
- dropMenu.style.display="none";
- }
- myDiv.onclick = function(oEvent){
- var oEvent = oEvent || window.event;
- if(document.all){
- oEvent.cancelBubble = true;
- }
- else{
- oEvent.stopPropagation();
- }
- dropMenu.style.display="block";
- }
jQuery实现代码:
- $(document).click(function{
- $("#dropMenu").hide();
- });
- $("#myDiv").click(function(event){
- event.stopPropagation();
- $("#dropMenu").show();
- });
这样写就能防止当点击myDiv
时,执行document
的点击事件。