`

js点击空白处触发事件

    博客分类:
  • js
 
阅读更多
我们经常会出现点击空白处关闭弹出框或触发事件
<div class="aa" style="width: 200px;height: 200px;background-color: red;"></div>

js代码
$(document).mouseup(function(e) {
		var _con = $('.aa'); // 设置目标区域
		if (!_con.is(e.target) && _con.has(e.target).length === 0) {
			alert("4545");
		}
	});

当我们点击此div之外的地方时会触发事件,这里可以写业务和逻辑
  • 大小: 12 KB
分享到:
评论

相关推荐

    Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)

    在Vue.js中,有时我们需要实现一个功能,即当弹出框或者Popover显示后,用户点击页面空白区域可以自动隐藏这些元素。以下将介绍三种实现这一功能的方法:手动监听判断、自定义指令以及使用遮罩层。 ### 第一种方式...

    微信小程序自定义下拉框,点击空白处隐藏

    同时,我们需要监听全局的触摸事件,以便在用户点击空白区域时隐藏下拉框。 ```javascript Component({ properties: {}, data: { showDropdown: false }, methods: { toggleDropdown() { this.setData({ ...

    空白处点击关闭DIV层

    - **事件对象**:在JavaScript的事件处理函数中,`event` 对象包含了有关触发事件的信息,例如 `event.target` 可以获取到触发事件的元素。 - **条件判断**:通过比较点击事件的目标元素是否是我们希望关闭的DIV,...

    js 鼠标点击事件及其它捕获

    当用户点击页面空白处时,`document.onclick()`函数会被触发。这个函数会检查是否点击了含有`abc`属性的元素,并且`temshowTag`为假(意味着没有一个`div`当前是打开的状态)。如果是这样,函数会获取所有`priceDiv`...

    vue点击页面空白处实现保存功能

    在Vue开发过程中,有时我们需要实现特定的交互效果,例如点击页面空白处实现保存功能。这个功能常见于编辑表格等场景,允许用户双击表格行进行编辑,然后在点击其他非编辑区域时自动保存更改。以下将详细介绍如何在...

    js 点击切换和点击伸缩

    在这个例子中,`toggleButton`是触发点击事件的按钮,`contentToToggle`是要切换显示或隐藏的区块。当按钮被点击时,内容区块的`display`属性会根据当前值在`none`和`block`之间切换,从而实现显示或隐藏的效果。 ...

    vue通过指令(directives)实现点击空白处收起下拉框

    标题中提到的“vue通过指令实现点击空白处收起下拉框”,这是一个常见的交互需求。通常,用户打开一个下拉框后,希望点击页面的任何其他非下拉框区域时,下拉框能够自动关闭。这个功能可以通过创建一个自定义指令 `v...

    原生js代码点击文字或小图弹出层_点按钮关闭弹出层特效

    2. **JavaScript事件监听**:使用原生JS的`addEventListener`方法监听触发元素和关闭按钮的点击事件。 ```javascript document.getElementById('trigger').addEventListener('click', showPopup); document....

    jquery如何实现点击空白处隐藏元素

    此外,还有一种情况是,当页面中存在其他可以接收点击事件的元素时,可能需要根据具体元素的层级关系来调整事件监听的逻辑,确保点击空白处隐藏元素的功能不受影响。 总结来说,通过jQuery实现点击空白处隐藏元素是...

    js中点击空白区域时文本框与隐藏层的显示与影藏问题

    当文本框被点击时,如果事件处理函数是`control_bubble`,则会阻止事件冒泡,防止文本框的点击事件触发文档级别的`onclick`事件。当浮动层被点击时,会触发`fill_input`函数,这个函数将浮动层的内容赋值给文本框。 ...

    ASP.NET鼠标响应事件

    在"例1-12(js鼠标事件响应)"这个文件中,很可能是示例代码,演示了如何使用JavaScript来处理鼠标的移动、点击等事件。JavaScript是一种常用的客户端脚本语言,它可以轻松地添加动态效果和交互性到HTML页面。例如,...

    bootstrap 点击空白处popover弹出框隐藏实例

    Bootstrap 点击空白处Popover弹出框隐藏实例 ...本篇文章提供了一个基本的Bootstrap 点击空白处Popover弹出框隐藏实例,展示了Popover的基本用法、事件、手动触发、容器、取消冒泡和隐藏等知识点。

    js利用事件的阻止冒泡实现点击空白模态框的隐藏

    在前端开发中,模态框(Modal)是一种常见的用户界面元素,用于...实现点击空白处隐藏模态框的功能,可以提升用户体验,使用户操作更自然。而掌握事件冒泡和阻止冒泡的知识,对于处理更复杂的前端交互也是十分重要的。

    在layui中layer弹出层点击事件无效的解决方法

    如果`#test`是在layer弹出层动态生成的,那么这个点击事件将不会被触发,因为这个元素在页面初始加载时并不存在。 为了解决这个问题,可以使用jQuery的`on`方法来绑定事件,特别是对于动态生成的元素。`on`方法允许...

    Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

    在Vue.js中,实现点击显示再点击隐藏的功能,同时点击页面空白区域也能隐藏效果,是一项常见的交互需求。这种效果常用于下拉菜单、模态框或者任何需要控制显示与隐藏的组件。以下将详细讲解如何在Vue中实现这一功能...

    js 点击页面其他地方关闭弹出层(示例代码)

    这使得只有点击弹出层外部的事件才会触发关闭弹出层的逻辑。 3. **CSS样式**: - **绝对定位(absolute positioning)**: `.pop`类使用了`position:absolute`,使得弹出层相对于最近的非静态定位祖先元素进行定位...

    jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    1. jQuery事件绑定:通过使用jQuery的.bind()方法或.on()方法来绑定点击事件到document对象上,这样可以在用户点击页面任何位置时触发定义好的函数。 2. 浏览器兼容性处理:文中提到的变量赋值方式(如vare=e||...

    VS下JS调试方法的一点总结

    在VS中,只需将光标置于该行,然后点击左侧的空白处即可设置或取消断点。 #### 2. 控制台日志 利用`console.log()`函数打印变量值和运行信息至控制台,是另一种常见的调试手段。虽然不如断点调试精确,但在追踪...

    jquery使整个div区域可以点击的方法

    让整个div区域变得可点击,实际上是在该div内的任何空白处点击都会触发事件处理器。在jQuery中,通常我们会在div元素上绑定一个click事件。但是在绑定点击事件之前,需要确保在div内部没有其他元素需要捕捉该事件,...

Global site tag (gtag.js) - Google Analytics