js点击元素之外的地方隐藏该元素

有时候我们会有这种情况，点击按钮（或者指定元素）显示一个菜单栏，点击按钮和菜单栏外的区域隐藏菜单栏；

主要运用阻止事件冒泡来实现；下面是全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><style>*{margin: 0;padding: 0;}ul,li{list-style: none;}body{min-height: 1000px}.app{background: rgba(9,9,9,.1);width:200px;margin: 20px auto;text-align: center;padding: 10px;border-radius: 6px;}button{cursor: pointer;}</style><div class="app"><button>点击切换</button><ul><li>内容1</li><li>内容2</li><li>内容3</li></ul></div><script type="text/javascript">//获取相应的dom元素 var app=document.querySelector('.app');var button=document.querySelector('button');var ul=document.querySelector('ul');// 第一步 点击按钮 切换 ul的状态button.addEventListener('click',function(){console.log(ul.style.display)if(ul.style.display=='none'||!ul.style.display){ul.style.display='block'}else{ul.style.display='none'}})// 第二步：点击网页隐藏 uldocument.addEventListener('click',function(){ul.style.display='none'})// 第三步：点击网页会隐藏ul，但是点击按钮不会显示ul，因为事件冒泡的原因，点击按钮也会触发document的点击事件，// 这里需要用到阻止事件冒泡，使得点击app元素内的区域不会触发外层的点击事件app.addEventListener('click',function(event){var e=event||window.event;if(e.cancelBubble){e.cancelBubble=true;//ie 阻止事件冒泡}else{e.stopPropagation();// 其余浏览器 阻止事件冒泡}})</script>
</body>
</html>

js点击元素之外的地方隐藏该元素相关推荐

HTML点击元素以外任意地方隐藏该元素
HTML点击元素以外任意地方隐藏该元素原生javascript写法: var scheduleBox = document.querySelector('#schedule-box') docume ...
jquery 点击元素以外任意地方隐藏该元素的方法
第一先实现点击任何地方都隐藏该元素(假设id="bar") $(document).click(function(){ $("#bar").hide();}); ...
android+点击屏幕隐藏键盘,Android点击EditText文本框之外任何地方隐藏键盘的解决办法...
1,实现方法一: 通过给当前界面布局文件的父layout设置点击事件(相当于给整个Activity设置点击事件),在事件里进行键盘隐藏 android:id="@+id/traceroute ...
jquery实现点击页面其他地方隐藏指定元素
代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> < ...
jquery实现在元素外单击，隐藏此元素
实现的思路是假如在元素A外单击隐藏A 判断被鼠标按下时的元素的所有父元素中是否包含了A,没有包含则可以知道鼠标是在A之外单击的,则隐藏. 代码如下: $(document).mouseup(fun ...
Android点击EditText文本框之外任何地方隐藏键盘的解决办法
通过给当前界面布局文件的父layout设置点击事件(相当于给整个Activity设置点击事件),在事件里进行键盘隐藏 <LinearLayout xmlns:android="http ...
点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏
<input id="btnClick" type="button" value="原生写法" class="btn-gre ...
JS点击DIV以外的地方，隐藏DIV
document.onclick = function (event) { var e = event || window.event; var elem = e.srcElement||e.targ ...
java selenium用js点击_Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?...
小编典典你可以通过以下任一过程解决它们: 1.由于存在JavaScript或AJAX调用而无法单击元素尝试使用ActionsClass: WebElement element = driver.f ...

js点击元素之外的地方隐藏该元素

js点击元素之外的地方隐藏该元素相关推荐

最新文章

热门文章