事件捕获，点击其他body的其他区域，对body特定区域进行操作且排除此区域点击触发

最新推荐文章于 2019-08-16 14:03:25 发布
最新推荐文章于 2019-08-16 14:03:25 发布
阅读量2.1k 收藏
点赞数
分类专栏： JavaScript 文章标签： 事件捕获
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrhaoxiaojun/article/details/52702585
版权 
$("body").on("click", function(e) {
    e = e || window.event;
    // if(! 点击触发动作的区域的父级元素 && 点击区域在显示的状态下}{
    //      ==>即：点击其他body的其他区域 并且 在操作区域显示情况下 才进入判断
    //      ==>该区域隐藏
    // }
    if (!$(e.target).closest('.sass-city-select').length && $(".sass-city-panel").is(':visible')) {
        $(".sass-city-panel").hide();
    }
})

mrhaoxiaojun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
body对象点击事件阻止冒泡
qq_37889636的博客
03-16 1638
jQuery(function($){ $(document).click(function(e){ if($(e.target).is('a')||$(e.target).is('input:button')||$(e.target).is('input:checkbox')) return; else{ ...
捕获 点击除某区域以外的事件
u010969088的博客
05-30 3913
首先可以给document对象绑定click事件。 然后由于事件冒泡机制，你单击文档的任意地方（包括绿色区域）都会触发click事件。 先在事件里写上隐藏绿色区域的代码 $(document).on('click',function(e){ //点击触发的事件 }); 然后，再给某区域（例如aaa）绑定click事件，这时候阻止事件冒泡，这样一来，点击该区域的话，是不会...
DOM(5)——body、document对象的事件，其他事件
qq_34573534的博客
08-16 431
1、body、document对象的事件 （1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。 （2）onu...
点击某个标签以外位置执行
前台技术
01-20 699
html： 所有产品     ALL PRODUCTS 2环球指数期货2Global Index Futures 3环球指数期货3Global Index 4环球指数期货4Global Index Futures 5环球指数期货5Global Futures 6环球指数期货6Index Futures 所有产品     ALL PRODUCTS 2环球指数期货2Gl
点击body获取点击的对象
mofijeck的专栏
05-18 545
点击body获取点击的对象 $("body").click(function (e) {         var o = $(e.target);         var id = o.attr("id");         if (typeof (id) == "undefined") {             id = o.parent().parent().parent().at
点击除去特定元素的body方法
hell0__kitty的博客
08-22 670
转自 关于点击空白关闭弹窗的js写法推荐？ 里面有个不错的答案$(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 some code... // 功能代码
JS html事件冒泡和事件捕获操作示例
01-21
1.冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 我一般用法就是理解为触发事件A, 会触发A的父亲，爷爷，爷爷的父亲…… 代码： <!DOCTYPE html> <html> <...
vue.js click点击事件获取当前元素对象的操作
10-14
在Vue.js中，点击事件（click）是一种常见的用户交互方式，用于响应用户的点击操作。当一个元素被点击时，我们可以捕获这个事件并执行相应的处理函数。在这个过程中，Vue.js提供了`$event`对象，它包含了与事件相关...
在Vue组件中获取全局的点击事件方法
10-18
但是这种方法存在一些问题，比如需要精确管理z-index以确保遮罩层位于正确位置，且可能会导致用户在点击其他功能按钮时需要额外点击一次，因为遮罩层会捕获这些点击事件。 ### 解决方法二：局部监听 为“列表组件”...
vue绑定的点击事件阻止冒泡的实例
08-28
事件冒泡是一种常见的事件机制，在 DOM 事件流中，事件会从最特定的事件目标到最不特定的事件目标（document 对象）触发。这篇文章将为大家分享一个 Vue 绑定的点击事件阻止冒泡的实例，具有很好的参考价值。 事件...
jquery 获取页面点击事件 $("body").click()
热门推荐
huaishuming的专栏
01-05 5万+
需求：当某个按钮触发click事件，那么显示 某个DIV 代码 $("#button1").click(function(){ $("#div1").show(); }); 再次点击则隐藏： 所以以上代码不要了 换成  $("#button1").click(function(){ $("#div1").toggle(); }); 定义和用法
JS点击body效果
zuo520yang的博客
04-15 3039
jQuery(document).ready(function($) { $(“body”).click(function(e) { var a = new Array(“路见不平一声吼，吼完继续往前走。”, “咸鱼翻身，还是咸鱼。”, “水能载舟，亦能煮粥！”, “明月几时有，抬头自己瞅。”, “天哪！我的衣服又瘦了。”, “听君一席话，回家烤白薯。”, “流氓不可怕，就怕流氓有文化。”, “知...
js事件冒泡、事件捕获和阻止默认事件详解
rishengcsdn的专栏
08-04 834
js事件冒泡、事件捕获和阻止默认事件详解 原文链接：http://u.cxyblog.com/28/article-aid-3391.html?ref=myread 作者： wodi0007 被查看 406 次 收藏（0）次     js冒泡事件事件捕获默认事件 分享到：更多1 谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试
iOS上的jQuery.on()冒泡事件绑定 给body添加点击事件
xiaoyueyue_2017的博客
07-26 1998
html js iOS的冒泡，如果一直没有handler来处理事件，则只会冒泡到body的内层，而不会冒泡到body上。因此，只好加了个children()这么干了：
js 设置某元素以外区域点击事件
weixin_36728104的博客
11-15 1万+
情况还原：li元素的子元素input绑定blur后发现点击空白区域可以出发input的blur事件 但是点击li元素不会触发（原因我也不知道为啥 我是做后台的）于是采用以下方式在点击除该input以外的区域强制加上input的blur事件 代码如下：//控制点击input以外的区域会触发input的blur事件 $(document).mouseup(function (e) {
使用事件捕获来处理点击事件，完整demo
最新发布
07-15
当您使用事件捕获来处理点击事件时，可以按照以下步骤创建一个完整的示例： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>事件捕获示例</title> </head> <body> <div id="outer"> <div id="inner"> <p>点击此处</p> </div> </div> <script src="script.js"></script> </body> </html> ``` JavaScript部分（script.js）： ```javascript // 获取需要绑定事件的元素 var outerElement = document.getElementById('outer'); var innerElement = document.getElementById('inner'); // 创建点击事件处理函数 function handleClick(event) { console.log('点击事件被触发！'); console.log('目标元素:', event.target); } // 使用事件捕获绑定点击事件 outerElement.addEventListener('click', handleClick, true); innerElement.addEventListener('click', handleClick, true); ``` 在上面的示例中，我们通过使用事件捕获来处理点击事件。当点击"inner"元素或其中的文本时，点击事件将沿着DOM树从根节点开始传播，直到达到目标元素。然后，"handleClick"函数将被调用并打印一些信息到控制台。 您可以打开浏览器的开发者工具（通常是按下F12），然后在控制台中查看输出结果。每次点击"inner"元素或其中的文本时，都会在控制台中显示相关信息。 希望这个示例对您有帮助！如果您还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值